dataTable使用

官网

——-DataTable英文网址
——-DataTables中文网址
——-DataTables一些例子

本文主要是围绕下面的例子进行讲解的，请看效果图

说明： 全选功能，点击删除，批量删除，批量添加等等功能都可以实现。
下载的位置DataTables经典案例

使用方法

1.首先引入jQuery和DataTablesjs
2.在html里面建一个table

<table class="table" id="shopsettled"></table>

3.在js内引用

  $(document).ready(function(){        $('#shopsettled').DataTable();    });

4.一些采用的基本参数

 var oTable = $('#shopsettled').DataTable({            "ordering": false,//排序显示隐藏            "searching": false,//搜索显示或者隐藏           // "order": [[ 3, "desc" ]],//默认第几列进行排序            "data": data,//这里是自己写的一个json数据来进行数据渲染            "ajax": {                "url":“http://write.blog.csdn.net/mdeditor”,                “type”:"post",                "success":function{                    console.log('111')                }                    },            "dom": '<"top"><"toolbar">flt<"bottom"p><"clear">',//clear代表的清除浮动，这里的top和toolbar是指的是在table上添加一个class为top和toolbar的div.--flt:分别指的是search框，            "columns": [//渲染thead                {                    "data": null,                    "width": 25,                    "title": "<input type='checkbox' id='checkAll' />",                    "defaultContent": "<input type='checkbox' name='checkList' />"//放入hml结构的两种方式                },                {"data": "id", "title": "ID", "width": 40,},                {"data": "appletName", "title": "小程序名称", "width": 200,},                {"data": "salesman", "title": "业务员", "width": 80,},                {"data": "salemobileNum", "title": "手机号", "width": 100,},                {"data": "business", "title": "商家联系人", "width": 80,},                {"data": "shopmobileNum", "title": "手机号", "width": 100,},                {                    "data": null, "title": "店铺信息", "width": 70, render: function (data, type, full, meta) {//放入hml结构的两种方式                    return "<a title='店铺信息' name='dpxx' href='javascript:;' onclick='shopinfo_check(this)' class='btn btn-xs btn-warning'><i class='fa fa-eye  bigger-120'></i></a>"                }                },            ],        });        $("div.toolbar").html('<div style="margin-bottom: 10px">操作列表：<button  class="selfbtnAuto" id="button">批量删除</button>' +            '<button  class="selfbtnAuto">批量修改单位</button><button  class="selfbtnAuto">批量增加单位</button></div>');    })

5.添加一行

$(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( false );        counter++;    } );    // Automatically add a first row of data    $('#addRow').click();} );

6.选中多行

$(document).ready(function() {    var table = $('#example').DataTable();    $('#example tbody').on( 'click', 'tr', function () {        $(this).toggleClass('selected');    } );    $('#button').click( function () {        alert( table.rows('.selected').data().length +' row(s) selected' );    } );} );

7.每当创建一行的回调函数

$(document).ready(function() {    $('#example').DataTable( {        "createdRow": function ( row, data, index ) {            if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {                $('td', row).eq(5).addClass('highlight');            }        }    } );} );

8.删除选中的一行

 oTable.rows('.selected').remove().draw();