Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Verwendung des jQuery-Tabellen-Plug-ins datatables_jquery

Zusammenfassung der Verwendung des jQuery-Tabellen-Plug-ins datatables_jquery

WBOYOriginal: 2016-05-16 16:36:551460Durchsuche

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.

Offizielle Website und Download-Adresse: http://www.datatables.net

Die neueste Version ist 1.10.2, Leser können hier klicken Diese Seite herunterladen.

Die Hauptfunktionen sind wie folgt:

1. Automatische Paging-Verarbeitung
2. Sofortige Tabellendatenfilterung
3. Datensortierung und automatische Erkennung von Datentypen
4. Spaltenbreite automatisch verarbeiten
5. Stile können über CSS
angepasst werden 6.Unterstützt versteckte Spalten
7. Einfach zu bedienen
8. Skalierbarkeit und Flexibilität
9.Internationalisierung
10. Erstellen Sie dynamisch Tabellen
11. Kostenlos

Anwendung:

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">

Fügen Sie JS- und CSS-Dateien in den obigen Code ein. Sie können es in der Demo kopieren. Achten Sie auf die Pfadadresse.

Sehen wir uns den folgenden Code an:

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

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

<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<div 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>
</div>    
</div>

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

Lassen Sie uns abschließend über jedes Attribut sprechen (den Hauptort, der hinzugefügt werden soll)

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

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

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

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

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

  //} );
//} );

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

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

//$(document).ready(function() {
  //$('#example').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 = $('#example').dataTable({
    "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
    "sPaginationType": "full_numbers"
  });
} );

Die Standardsprache ist Englisch, natürlich kann sie internationalisiert werden:
„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":   " 最后一页 "
}
}

Dies sind die grundlegenden Teile von Datentabellen. Relativ einfach zu meistern.

Ich hoffe, dass dieser Artikel jedem beim Erlernen der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vier praktische Methoden zum Entfernen von Duplikaten aus js arrays_javascript-KenntnissenNächster Artikel：Vier praktische Methoden zum Entfernen von Duplikaten aus js arrays_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen