datatables.js 学习总结

$('#example').dataTable( {

         "columnDefs": [ #列属性定义

             {

                 "targets": [ 2 ], #列索引

                 "visible": false, #是否可见

                 "searchable": false #是否可搜索

             },

             {

                 "targets": [ 3 ],

                 "visible": false

             }

         ]

     } );




如何更改默认布局（如搜索、个数选择等）

    "dom" 设置可以更改默认布局：如
          $('#example').DataTable({

          "dom": '' #取消所有除了表格外的控件（filter等）

     });

          "dom": '<lf<t>ip>' l、f两个控件在t的左上、右上，i、p两个控件在table的左下、右下

          "dom": '<"top"i>rt<"bottom"flp><"clear">'

          <lf<t>ip>在html中相当于：               

1 2 3 4 5 6 7 8 9

<div>      { length }      { filter }      <div>          { table }      </div>      { info }      { paging } </div>

• l - Length changing
• f - Filtering input
• t - The Table!
• i - Information
• p - Pagination
• r - pRocessing
• < and > - div elements
• <"#id" and > - div with an id
• <"class" and > - div with a class
• <"#id.class" and > - div with an id and class

如果在表格左上角增加自定义按钮：

$(document).ready(function() {     $('#example').dataTable( {         "dom": '<"toolbar">frtip'

     } );

     $("div.toolbar").html('<input type="button" value="add">');

} );

//需要定义toolbar的浮动位置，否则button与filter会分成两行：

<style type="text/css" class="init">

     .toolbar {float: left;}</style>

增加一行：

$(document).ready(function() {

     var t = $('#example').DataTable();

     var counter = 1;

 

     $('#addRow').on( 'click', function () {

         t.row.add( [

             counter +'.1',

             counter +'.2',

             counter +'.3',

             counter +'.4',

             counter +'.5'

         ] ).draw();

 

         counter++;

     } );

 

    

} );