jQueryテーブルプラグインデータテーブルの使用方法の詳細な説明

今回は、jQuery テーブル プラグインの datatable の使用方法について詳しく説明します。jQuery テーブル プラグインの datatable を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

DataTables は jQuery テーブル プラグインです。これは、高度なインタラクティブなコントロールとあらゆる

HTML テーブル のサポートを追加する、漸進的な機能強化の基盤に基づいて構築された非常に柔軟なツールです。

最新バージョンは 1.10.2 です。読者はここをクリックしてダウンロードできます。

主な機能は次のとおりです:

1. 自動ページング処理

2. インスタント テーブル
データ タイプ 自動検出 4. カスタマイズ可能なスタイル
5. CSS 6. 非表示の列をサポートします 8. 使いやすさと柔軟性
10. テーブルを動的に作成します

まず、次のコードを見てください。
上記のコードにjsファイルとcssファイルを導入します。デモでコピーできます。パスアドレスに注意してください。

それでは、次のコードを見てみましょう:

<title>DataTables example</title>
<style>
@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></script>
<script></script>
<script></script>

上記により、図に示すようなページング効果を作成できます。選別。等

最後に、各属性 (主な追加場所) について説明します

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

//此处为body的id
<p>//*p 里是 table ，table包括thead等，最好按此格式写*
</p><h1 id="物品种类管理">物品种类管理</h1>
<p>
</p>

//id 别忘了 //此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好   

物品编号	物品名称	物品单位	编辑状态	随便
Trident	Internet Explorer 4.0	Win 95+	4	X
Trident	Internet Explorer 5.0	Win 95+	5	C
Trident	Internet Explorer 5.5	Win 95+	5.5	A

    

デフォルトの言語は英語ですが、もちろん国際化できます:

"sUrl": "/SSS/dataTables/de_DE.txt" 国際化された言語を追加するだけですファイルできます。 パスが正しい限り、名前は何でも構いません。私が作成した国際化ファイルの内容は次のとおりで、txt に直接コピーして使用できます

//$(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": 'rt'//这段是自定义布局没搞明白挺复杂的。  * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing*  - p elements*  - p with a class  * Examples: , <lf>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"
  });
} );</lf>

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、その他の情報に注目してください。関連記事はPHP中国語サイトにあります！

推奨書籍:

JS が XML と JSON を相互に変換する方法

JS JSON.stringify を実装する手順の詳細な説明

Ajax、jsonp、json ajax の違いの詳細な説明そしてjsonpとjson

以上がjQueryテーブルプラグインデータテーブルの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。