Einführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen-js-Tutorial-php.cn

Einführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen

伊谢尔伦

Freigeben： 2017-07-22 09:28:57

Original

2101 Leute haben es durchsucht

DataTables ist ein jQuery-Tabellen-Plug-in. Dabei handelt es sich um ein hochflexibles Tool, das auf progressiven Verbesserungen basiert und erweiterte interaktive Steuerelemente und Unterstützung für jedes HTML-Formular hinzufügt.

Verwendung:

Schauen Sie sich zunächst den folgenden Code an:

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">

Nach dem Login kopieren

Führen Sie JS- und CSS-Dateien ein der obige Code. Es kann in der Demo kopiert werden. Achten Sie auf die Pfadadresse.

Dann werfen wir einen Blick auf den folgenden Code:

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(&#39;#example&#39;).dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true,  //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>

</head>
<body id="dt_example">//此处为body的id

<p id="container" align="center">//*p 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<p id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>

<tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</p>    
</p>

Nach dem Login kopieren

Das Obige kann den im Bild gezeigten Effekt erzeugen, Paging. Sortieren. usw.

Lassen Sie uns abschließend über jedes Attribut sprechen (hauptsächlich hinzugefügter Standort)

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {//加载
    //"bPaginate": true,//分页按钮
    //"bLengthChange": true,//每行显示记录数
    //"bFilter": true,//搜索栏
    //"bSort": true,//排序
    //"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
    //"bAutoWidth": true } );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"aoColumns": [ 
    //  /* Engine */  null, //默认
    //  /* Browser */ null,
    //  /* Platform */ { "bSearchable": false, //不可参与搜索
    //           "bVisible":  false },//不可见
    //  /* Version */ { "bVisible":  false },//不可见
    //  /* Grade */  null
    //] } );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable({
  //});
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"sDom": &#39;<"top"i>rt<"bottom"flp<"clear">&#39;//这段是自定义布局没搞明白挺复杂的。  * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - p elements* <"class" and > - p with a class  * Examples: <"wrapper"flipt>, <lf<t>ip>

  //} );
//} );

//$(document).ready(function() {
//  $(&#39;#example&#39;).dataTable( {
  //  "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( { //分页信息 不是很难理解。
    //"oLanguage": {
      //"sLengthMenu": "Display _MENU_ records per page",
      //"sZeroRecords": "Nothing found - sorry",
      //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
      //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
      //"sInfoFiltered": "(filtered from _MAX_ total records)"
    //}
  //} );
//} )

$(document).ready(function() {
  oTable = $(&#39;#example&#39;).dataTable({
    "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
    "sPaginationType": "full_numbers"
  });
} );

Nach dem Login kopieren

Die Standardsprache ist Englisch und kann es natürlich auch sein internationalisiert:
"sUrl": "/SSS/dataTables/de_DE.txt" Fügen Sie einfach eine internationalisierte Datei hinzu. Der Name kann beliebig sein, solange der Pfad korrekt ist. Der Inhalt der von mir geschriebenen Internationalisierungsdatei lautet wie folgt und kann zur Verwendung direkt in txt kopiert werden.

{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst":  "第一页",
"sPrevious": " 上一页 ",
"sNext":   " 下一页 ",
"sLast":   " 最后一页 "
}
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!