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();