表格组件-datatable

Datatable组件可实现表格分页、排序、搜索、行列冻结等功能;常用jquery UI版本;bootstrap版本是基于该版本之上的; 官网地址:https://datatables.net/ 中文社区:http://datatables.club/

公共方法见: 常用公共方法库

服务器ajax分页(单表头、多选、全选、行双击、分页、自适应高度、列宽、列文字对齐方向、文字溢出显示...、分页:不显示总页数)
<table id="example1" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/datatables.min.js"></script>
<script src="../js/plugins/jquery-number/jquery.number.min.js"></script> //数学格式

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js" ></script>

$(document).ready(function() {
    var searchParemOBj_ = { //示例
        'asd': 112
    };
    var DT_ = COM_TOOLS.DT_init('example1', [{
            "data": null,
            "title": '序号',
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "width": "30px",
            "title": '<span class="cus-checkbox-all"></span>',
            "className": "select-checkbox",
            "defaultContent": ''
        }, {
            "data": "first_name",
            "title": '标题1'
        }, {
            "data": "last_name",
            "title": '标题2'
        }, {
            "data": "position",
            "title": '标题3',
            "className": "text-right",
            "width": "50px", //文字溢出显示...
            "render": function(data, type, row, meta) {
                return '<span title="' + data + '" class="spanwhite-space" style="width: 50px;">' + data + '</span>';
            }
        }, {
            "data": "office",
            "title": '标题4',
            "className": "text-center"
        }, {
            "data": "start_date",
            "title": '标题5'
        }, {
            "data": "salary",
            "title": '标题6',
            "render": function(data, type, row, meta) {
                return $.number(data, 2); //货币格式 function( number, 小数位数, 小数位标识(.), 千分位标识(,) )
            }
        }, {
            "data": "node1",
            "title": '标题7',
            "render": function(data, type, row, meta) {
                return '<input type="text" name="name1" class="input-sm no-Sel-obj js-getval" value="' + data + '"/>';
            }
        }, {
            "data": "node2",
            "title": '标题8',
            "render": function(data, type, row, meta) {
                return '<input type="text" name="name2" class="input-sm no-Sel-obj js-getval" value="' + data + '"/>';
            }
        }, {
            "data": "node3",
            "title": '标题9',
            "render": function(data, type, row, meta) {
                return '<input type="text" name="name3" class="input-sm no-Sel-obj js-getval" value="' + data + '"/>';
            }
        }],
        '/dt/api',
        'get',
        searchParemOBj_,
        {
            jsTrDblclick: function(trdata, jqdom) { //双击行回调函数,返回当前行所有数据及当前行的jqueryNode对象,例如:获取行id
                alert('当前操作行ID为:'+trdata['first_name']);
            },
            other: {//(可选)自定义分页插件,不显示总页数
                pagingType: "simple_numbers_no_totalpage"
            }
        }
    );

    var table = DT_.table;

    table.on('page.dt', function() { //分页回调事件
        var info = table.page.info();
        //searchParemOBj_['aaa']=info.page;
        console.log('Showing page: ' + info.page + ' of ' + info.pages);
    });

    $('#demo1-btn1').click(function() { //COM_TOOLS.DT_getSelectRowsSourceData(table,'first_name') 返回所有选中行的'first_name'数组
        alert(DT_.getSelectRowsData('first_name').toString() || '未选中'); //[推荐] 与下面代码效果一致
        // alert(COM_TOOLS.DT_getSelectRowsSourceData(table, 'first_name').toString() || '未选中'); //示例
    });
    $('#demo1-btn2').click(function() {
        alert(JSON.stringify(COM_TOOLS.DT_getSelectRowsInputData(table)));
    });
    /*搜索按钮方案*/
    $('#demo1-btn3').click(function() {
        searchParemOBj_['searchNameVal'] = $.trim($('#demo1-input1').val());
        searchParemOBj_['searchPhoneVal'] = $.trim($('#demo1-input2').val());
        DT_.setAjaxData(searchParemOBj_); //默认修改搜索数据并刷新表格,如果:DT_.setAjaxData(searchParemOBj_, true);则不刷新表格,只修改搜索数据
    });
    
    /* 详情窗示例 */
    COM_TOOLS.infoTipsFn($(COM_TOOLS.DT_getNode(table, 'body')),'.spanwhite-space',
        function($obj){
            var rowData = COM_TOOLS.DT_getRowsSourceData(table, $obj.closest('td'))[0];
            return rowData.position;
        },
        {
            placement:'right',
            imageZoom:true
        }
    );
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../css/plugins/dataTables/datatables.min.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
{
    "draw": 1, //必要。Datatables(客户端)发送的draw是多少那么服务器就返回多少。 这里注意,作者出于安全的考虑,强烈要求把这个转换为整形,即数字后再返回,而不是纯粹的接受然后返回,这是 为了防止跨站脚本(XSS)攻击。
    "recordsTotal": 57, //必要。即没有过滤的记录数(数据库里总共记录数) 
    "recordsFiltered": 57, //必要。过滤后的记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数) 
    "data": [//必要。
        {
            "name":"Angelica",
            "age":"Ramos",
            "office":"System Architect",
            "address":"London",
            "date":"9th Oct 09",
            "salary":"$2,875"
        },
        {
            "name":"Ashton",
            "age":"Cox",
            "office":"Technical Author",
            "address":"San Francisco",
            "date":"12th Jan 09",
            "salary":"$4,800"
        },
        ...
    ]
}
本地数据(json-data)初始化
<table id="example2" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
$(document).ready(function() {
    var DT_ = COM_TOOLS.DT_init('example2', [{
            "data": null,
            "title": '序号',
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "width": "30px",
            "title": '<span class="cus-checkbox-all"></span>',
            "className": "select-checkbox",
            "defaultContent": ''
        }, {
            "data": "first_name",
            "title": '标题1'
        }, {
            "data": "last_name",
            "title": '标题2'
        }, {
            "data": "position",
            "title": '标题3',
            "className": "text-right",
            "width": "50px", //文字溢出显示...
            "render": function(data, type, row, meta) {
                return '<span title="' + data + '" class="spanwhite-space" style="width: 50px;">' + data + '</span>';
            }
        }, {
            "data": "office",
            "title": '标题4',
            "className": "text-center"
        }, {
            "data": "start_date",
            "title": '标题5'
        }],
        demo_dt_data_.data,
        {
            jsTrDblclick: function(trdata, jqdom) { //双击行回调函数,返回当前行所有数据及当前行的jqueryNode对象,例如:获取行id
                alert('当前操作行ID为:' + trdata['first_name']);
            },
            other: { //(可选)自定义分页插件
                pagingType: "simple"
            }
        }
    );
});

                        
本地静态数据(EL或C标签遍历输出,500行*30列以下可考虑使用该模式,注意默认为第一列初始化排序,支持客户端分页、搜索、排序、行拖拽等、字数过多换行显示[都掉table-class中的 nowrap])
序号 Name Position Office Age Start date Salary
1 Tiger Nixon System Architect System Architect System Architect Edinburgh 61 2011/04/25 $320,800
2 Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
3 Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
4 Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
5 Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
6 Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
7 Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
8 Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
9 Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
10 Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
11 Jena Gaines Office Manager London 30 2008/12/19 $90,560
12 Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
13 Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
14 Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
15 Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
16 Michael Silva Marketing Designer London 66 2012/11/27 $198,500
17 Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000

行拖拽后的结果:(必须依照后台序号进行排序)

                        
<table id="example3" class="table table-striped table-bordered" cellspacing="0">
    <thead>
        <tr>
            <th>序号</th>
            <th>Name</th>
            <th width="100">Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Tiger Nixon</td>
            <td>System Architect System Architect System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>13</td>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
        </tr>
        <tr>
            <td>14</td>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>15</td>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>16</td>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>17</td>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
        </tr>
    </tbody>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script src="../js/plugins/datatables/DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="../js/plugins/datatables/RowReorder-1.1.2/js/dataTables.rowReorder.min.js"></script>

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js" ></script>    
    
$(document).ready(function() {
    var table = $('#example3').DataTable({
        rowReorder: { //启用拖拽
            selector: 'tr'
        },
        pageLength: 5, //每页显示条数;paging=false 时该值为 -1
        lengthChange: true, //是否允许用户改变表格每页显示的记录数,显示条数组件
        lengthMenu: [5, 10, 15, 20], //配置可选的每页显示的记录数
        ordering: true, //是否启用排序组件,优先级高于columns中的排序控制;
        searching: true, //是否启用自带搜索组件;
        processing: false, //显示加载中,serverSide=true时生效
        serverSide:false //客户端模式
    });
    $('#demo3-input1').on('keyup',function() {
        table.column(3).search($(this).val()).draw();
    });
    //拖拽交互事件
    table.on('row-reorder',function ( e, diff, edit ){
        var result = '';
 
        for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
            var rowData = table.row( diff[i].node ).data();
 
            result += rowData[1]+' 新位置 '+
                diff[i].newData+' (旧位置 '+diff[i].oldData+')<br>';
        }
 
        $('#demo3-logbox').html( '结果:<br>'+result );
    });
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">   
<link href="../js/plugins/datatables/RowReorder-1.1.2/css/rowReorder.bootstrap.min.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
服务器ajax分页(行内有按钮,双击操作,指定行添加背景色)
操作 姓名 职位 账户 中心
<table id="example4" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>操作</th>
            <th>姓名</th>
            <th>职位</th>
            <th>账户</th>
            <th>中心</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script src="../js/plugins/datatables/DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js" ></script>    

$(document).ready(function() {
    var searchParemOBj={};
    var DT_=COM_TOOLS.DT_init('example4',[ 
            {
                "data": "DT_RowId",
                "render": function(data, type, row, meta) {
                    return '<button class="btn btn-success btn-xs" type="button">选择</button>';
                }
            }, {
                "data": "name1"
            }, {
                "data": "name2"
            }, {
                "data": "name3"
            }, {
                "data": "name4",
                "render": function(data, type, row, meta) {
                    return '<div class="onoffswitch">' +
                        '<input type="checkbox" checked class="onoffswitch-checkbox" id="' + meta['settings']['sTableId'] + '_in_' + meta['row'] + '">' +
                        '<label class="onoffswitch-label" for="' + meta['settings']['sTableId'] + '_in_' + meta['row'] + '">' +
                        '<span class="onoffswitch-inner"></span><span class="onoffswitch-switch"></span>' +
                        '</label></div>';
                }
            }
        ],
        '/dt/api2',
        'post',
        searchParemOBj,
        {
          other:{
                paging: false,
                info: false,
                destroy: true,
                createdRow: function(row, data, dataIndex) {/*指定行添加背景色*/
                    if(data['name1'].indexOf('顾问') !== -1) {
                        $(row).addClass('bg-danger');
                    }
                }
            }
        }
    );
    var table=DT_.table;
    
    table.on('click', 'tbody button', function() {
        var t_ = $(this).closest('tr');
        //setParentObjVal(t_); //仅限框架中使用
        alert(COM_TOOLS.DT_getRowsSourceData(table,t_,'name1'));
    }).on('dblclick', 'tbody button', function() {
        return false;
    }).on('dblclick', 'tbody tr', function() {
        var t_ = $(this);
        //setParentObjVal(t_); //仅限框架中使用
        alert(COM_TOOLS.DT_getRowsSourceData(table,t_,'name1'));
    });

    //关闭弹窗并设置回显值,只限在CRM iframe窗口页面中应用
    function setParentObjVal(obj) {
        cumParentCallValue(function() {
            if(cum_Modalindex_ > 0) {
                var b_ = parent.layer.getChildFrame('body', cum_Modalindex_); //获取上一个目标弹窗body对象
                if(cum_ModalValobj) {
                    parent.$('#' + cum_ModalValobj, b_).val(obj.data('itemtext'));
                    //设置hidden input 的值:
                    parent.$('#' + cum_ModalValobj + '_hide', b_).val(obj.data('itemid'));
                    /*
                     * 获取上一个目标弹窗的 window对象
                     * var p_win = parent.window["layui-layer-iframe"+cum_Modalindex_];
                     * 调用目标弹窗中定义的方法:p_win.yourfunction();
                     */
                }
            }
        });
    }
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">   
框架
<link href="../css/style.css" rel="stylesheet">
启用行内编辑
序号 姓名 客户类型 下次回访日期 咨询顾问 创建人 创建时间 中心
<table id="example5" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>序号</th>
            <th><span class="cus-checkbox-all"></span></th>
            <th>姓名</th>
            <th>客户类型</th>
            <th>下次回访日期</th>
            <th>咨询顾问</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>中心</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script src="../js/plugins/datatables/DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="../js/plugins/datatables/Select-1.2.0/js/dataTables.select.min.js"></script>

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js"></script>
    
/*demo5*/
$(document).ready(function() {
    var searchParemOBj_ = {
        'gg': 33
    };
    var DT_ = COM_TOOLS.DT_init('example5', [{
            "data": null,
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "className": "select-checkbox",
            "defaultContent": ''
        }, {
            "data": "first_name"
        }, {
            "data": "last_name"
        }, {
            "data": "start_date"
        }, {
            "data": "salary",
            "render": function(data, type, row, meta) {
                return $.number(data, 2); //货币格式 function( number, 小数位数, 小数位标识(.), 千分位标识(,) )
            }
        }, {
            "name": "node1", //此处要与后台字段一致
            "data": "node1"
        }, {
            "name": "node2", //此处要与后台字段一致
            "data": "node2"
        }, {
            "data": "node3"
        }],
        '/dt/api',
        'get',
        searchParemOBj_, {
            other: {
                select: {
                    selector: 'td:not(td:has(input))' //选择限制规则,不能选中含有input的td
                }
            }
        }
    )

    $('#demo5-btn1').on('click', function() {
        COM_TOOLS.DT_tdToinpEdit(DT_.table, ['node1:name', 'node2:name']);
    });
    $('#demo5-btn2').on('click', function() {
        var data_ = COM_TOOLS.DT_inpTotdSave(DT_.table, ['node1:name', 'node2:name']);
        //TODO
        if(data_) {
            //在通过AJAX把 data_ 数据发送给后台
        }
    });
});

基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">   
框架
<link href="../css/style.css" rel="stylesheet">
动态计算选中行内特定单元格数值(点击含有input的td或class='no-Sel-obj'的元素,不触发行选中)
计算结果:
序号 姓名 客户类型 下次回访日期 咨询顾问 创建人 创建时间 中心
<div class="row">
    <div class="col-sm-4">
        <div class="input-group"><span class="input-group-addon">计算结果:</span><input id="sumSel" type="text" class="form-control input-sm " value="0"/></div>
    </div>
    <div class="col-sm-4">
        <label class="radio-inline">
          <input class="inp-radio" type="radio" name="inlineRadioOptions" value="1" checked="true"> 选中行后计算
        </label>
        <label class="radio-inline">
          <input class="inp-radio" type="radio" name="inlineRadioOptions" value="2"> 自动全表格计算
        </label>
    </div>
</div>
<table id="example6" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>序号</th>
            <th><span class="cus-checkbox-all"></span></th>
            <th>姓名</th>
            <th>客户类型</th>
            <th>下次回访日期</th>
            <th>咨询顾问</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>中心</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script src="../js/plugins/datatables/DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="../js/plugins/datatables/Select-1.2.0/js/dataTables.select.min.js"></script>

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js"></script>

/*demo6*/
$(document).ready(function() {
    var searchParemOBj_ = {};
    var DT_=COM_TOOLS.DT_init('example6',[
        {
            "data": null,
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "className": "select-checkbox",
            "defaultContent": ''
        }, {
            "data": "first_name"
        }, {
            "data": "last_name"
        }, {
            "data": "start_date"
        }, {
            "data": "salary",
            "className": "text-success no-Sel-obj cus-text-link js-cus-event1",
            "render": function(data, type, row, meta) {
                return $.number(data, 2); //货币格式 function( number, 小数位数, 小数位标识(.), 千分位标识(,) )
            }
        }, {
            "name": "node1", //重点:要参与计算的TD
            "data": "node1",
            "render": function(data, type, row, meta) {
                return '<input type="text" name="node1" class="input-sm js-getval" value="' + data + '"/>';
            }
        }, {
            "data": "node2"
        }, {
            "data": "node3"
        }],
        '/dt/api',
        'get',
        searchParemOBj_
    );
    var table=DT_.table;
    
    $('.inp-radio').on('click', function() {
        var val_ = $(this).val();
        if(val_ == 1) {
            $('#example6').off().on('click', 'tbody tr', function(e) {
                if(e.target.nodeName=='INPUT'){
                    return false;
                }
                var sum_=$('#sumSel').val();
                if($(this).hasClass('selected')){
                    var new_sum=sum_-table.row($(this)).nodes().to$().find('input[type=text]').val();
                }else{
                    var new_sum=COM_TOOLS.fnFloatSum(sum_, table.row($(this)).nodes().to$().find('input[type=text]').val());
                }
                 $('#sumSel').val(new_sum);
                 
            }).on('change', 'tbody input[type=text]', function(event) {
                $('#sumSel').val(COM_TOOLS.DT_getInputSum(table, ['node1:name']));
            });
            
        } else {
            $('#example6').off().on('change', 'tbody input[type=text]', function(event) {
                $('#sumSel').val(COM_TOOLS.DT_getInputSum(table, ['node1:name'], true));
            });
        }
    });
    $('.inp-radio:eq(0)').trigger('click');
    $('#demo6-btn1').click(function() {
        alert(JSON.stringify(COM_TOOLS.DT_getSelectRowsInputData(table, $('.inp-radio:eq(1)').prop('checked'))));
    });
    
    table.on('click', 'tbody .js-cus-event1', function() {
        var t_=$(this).closest('tr');
        alert(JSON.stringify(COM_TOOLS.DT_getRowsSourceData(table,t_)));
        //TODO
    })
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">   
框架
<link href="../css/style.css" rel="stylesheet">
复合表头、锁定表头表尾以及列并计算列的和值
Name Position Office Age
Position Office Age Start date Position Office Age Start date Salary
Cedric Kelly Senior Javascript Developer Edinburgh 22.33 2012/03/29 Senior Javascript Developer Edinburgh 22.33 2012/03/29 5060
Airi Satou Accountant Tokyo 33.33 2008/11/28 Senior Javascript Developer Edinburgh 22.33 2012/03/29 1700
Brielle Williamson Integration Specialist New York 61.33 2012/12/02 Senior Javascript Developer Edinburgh 22.33 2012/03/29 2000
Brielle Williamson Integration Specialist New York 61.33 2012/12/02 Senior Javascript Developer Edinburgh 22 2012/03/29 2000
Name Position Office Age Start date Position Office Age Start date Salary
<table id="example7" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="text-center" rowspan="2">Name</th>
            <th class="text-center"  colspan="3">Position</th>
            <th  class="text-center"  colspan="2">Office</th>
            <th class="text-center"  colspan="4">Age</th>
        </tr>
        <tr>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>              
    <tbody>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>5060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>1700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>2000</td>
        </tr><tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>2000</td>
        </tr>
    </tbody>
    <tfoot style="color: #ff6600;">
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
基础
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/layer/layer.js"></script>

组件
<script src="../js/plugins/datatables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<script src="../js/plugins/datatables/DataTables-1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="../js/plugins/datatables/Select-1.2.0/js/dataTables.select.min.js"></script>
<script src="../js/plugins/datatables/FixedColumns-3.2.2/js/dataTables.fixedColumns.min.js"></script>

框架方法
<script src="../i18n/zh-CN.js"></script>
<script src="../js/subindex.js"></script>

/*demo7*/
$(document).ready(function() {
    var table = $('#example7').DataTable({
        scrollY:        "100px",//可选,是否固定表格高度,不包括表头;
        scrollCollapse: true,//与scrollY结合使用,是否固定高度,默认false;
        scrollX: true,
        paging: false,
        serverSide:false ,//客户端模式        
        select: {
            style: 'mutil',
            info: false
        }, //是否启用选中状态,需引入选中组件包,style:'mutil'为多选,默认单选'os'
        fixedColumns: {//锁定左侧1列
            leftColumns: 2,
            drawCallback:function(){
                COM_TOOLS.DT_getColumnSum($('#example7').DataTable(),[3,7,9],true);
            }
        }
    });
    $('#demo7-btn1').click(function(){
        alert(COM_TOOLS.DT_getColumnSum(table,[7]));
    })
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
rowsGroup合并行(合并数据相同的行)
序号 姓名 客户类型 下次回访日期 咨询顾问
<table id="example8" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>序号</th>
            <th><span class="cus-checkbox-all"></span></th>
            <th>姓名</th>
            <th>客户类型</th>
            <th>下次回访日期</th>
            <th>咨询顾问</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
附加组件:
<script src="../js/plugins/datatables/RowsGroup/dataTables.rowsGroup.js"></script>

//RowsGroup通过DT列选择器或者对应的列下标选执行对象,使该列内相邻的数据相同项进行合并
$(function() {
    var searchParemOBj_ = {};
    var DT_=COM_TOOLS.DT_init('example8',[
        {
            "data": null,
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "className": "select-checkbox",
            "defaultContent": ''
        }, {
            "data": "uname"
        }, {
            "data": "utype",
            "name": "utype", //需要人工维护该字段
            "className": "text-center"
        }, {
            "data": "udate",
            "className": "text-right"
        }, {
            "data": "uxname",
            "className": "text-center"
        }
    ],
     [{
            "uname": "王大1",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询1"
        }, {
            "uname": "王大2",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询1"
        }, {
            "uname": "王大3",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询2"
        }, {
            "uname": "王大4",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询3"
        }, {
            "uname": "王大5",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询3"
        }, {
            "uname": "王大6",
            "utype": "大客户",
            "udate": "04-21",
            "uxname": "咨询2"
        }],
        'get',
        searchParemOBj_,
        {
            other:{
                rowsGroup: ['utype:name', 5]
            }
        }
    );
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../js/plugins/datatables/DataTables-1.10.12/css/dataTables.bootstrap.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
三层表格嵌套
<table id="example9" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
$(document).ready(function() {
    var searchParemOBj_ = { //示例
        'asd': 112
    };
    var DT_ = COM_TOOLS.DT_init('example9', [{
            "data": null,
            "title": '序号',
            "className": "text-center",
            "width": "30px",
            render: function(data, type, row, meta) { /*显示行号*/
                return 1 + meta.row;
            }
        }, {
            "data": null,
            "width": "30px",
            "title": "操作",
            "className": "details-control no-Sel-obj",
            "defaultContent": ''
        }, {
            "data": "first_name",
            "className": "text-center",
            "title": '姓名'
        }, {
            "data": "position",
            "className": "text-center",
            "title": '地址'
        }],
        '/dt/api',
        'get',
        searchParemOBj_, {
            jsTrDblclick: function(trdata, jqdom) {
                alert('当前操作行ID为:' + trdata['first_name']);
            },
            other: {
                pagingType: "simple_numbers_no_totalpage"
            }
        }
    );
    var table = DT_.table;
    function checkShow(tb, tr, str) {
        var r = tb.row(tr);
        if(r.child.isShown()) {
            tr.removeClass('shown');
            r.child.remove();
        } else {
            tb.rows().every(function() {
                this.child.remove();
                this.nodes().to$().removeClass('shown');
            })
            tr.addClass('shown');
            r.child(str).show();
        }
    }
    $('#example9').on('click', 'tbody.first_table td.details-control', function(e) {
        e.stopPropagation();
        var tr = $(this).closest('tr');
        var str = '<table id="table-1" cellpadding="5"  class="table table-striped table-bordered nowrap" cellspacing="0" width="100%" style="border:1px solid #ddd;"><thead></thead><tbody class="second_table"></tbody></table>';
        checkShow(table, tr, str);
        var DT_1 = COM_TOOLS.DT_init('table-1', [{
                "data": null,
                "title": '序号',
                "className": "text-center",
                "width": "30px",
                render: function(data, type, row, meta) { /*显示行号*/
                    return 1 + meta.row;
                }
            }, {
                "data": null,
                "width": "30px",
                "title": "操作",
                "className": "details-control no-Sel-obj",
                "defaultContent": ''
            }, {
                "data": "first_name",
                "className": "text-center",
                "title": '姓名'
            }, {
                "data": "position",
                "className": "text-center",
                "title": '地址'
            }],
            '/dt/api',
            'get',
            '', {
                other: {
                    paging: false,
                    info: false
                }
            }
        );
        var table_ = DT_1.table;
        table_.on('click', 'tbody.second_table td.details-control', function(e) {
            e.stopPropagation();
            var tr_ = $(this).closest('tr');
            var str_ = '<table id="table-2" cellpadding="5"  class="table table-striped table-bordered nowrap" cellspacing="0" width="100%" style="border:1px solid #ddd;"><thead></thead><tbody class="second_table"></tbody></table>';
            checkShow(table_, tr_, str_);
            var DT_2 = COM_TOOLS.DT_init('table-2', [{
                    "data": null,
                    "title": '序号',
                    "className": "text-center",
                    "width": "30px",
                    render: function(data, type, row, meta) { /*显示行号*/
                        return 1 + meta.row;
                    }
                }, {
                    "data": "last_name",
                    "title": "姓",
                    "className": "text-center",
                }, {
                    "data": "first_name",
                    "className": "text-center",
                    "title": '名称'
                }, {
                    "data": "position",
                    "className": "text-center",
                    "title": '地址'
                }],
                '/dt/api',
                'get',
                '', {
                    other: {
                        paging: false,
                        info: false
                    }
                }
            );
            var table_2 = DT_2.table;
        })
    })
    table.on('page.dt', function() { //分页回调事件
        var info = table.page.info();
        console.log('Showing page: ' + info.page + ' of ' + info.pages);
    });
})
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../css/plugins/dataTables/datatables.min.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
{
    "draw": 1, //必要。Datatables(客户端)发送的draw是多少那么服务器就返回多少。 这里注意,作者出于安全的考虑,强烈要求把这个转换为整形,即数字后再返回,而不是纯粹的接受然后返回,这是 为了防止跨站脚本(XSS)攻击。
    "recordsTotal": 57, //必要。即没有过滤的记录数(数据库里总共记录数) 
    "recordsFiltered": 57, //必要。过滤后的记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数) 
    "data": [//必要。
        {
            "name":"Angelica",
            "age":"Ramos",
            "office":"System Architect",
            "address":"London",
            "date":"9th Oct 09",
            "salary":"$2,875"
        },
        {
            "name":"Ashton",
            "age":"Cox",
            "office":"Technical Author",
            "address":"San Francisco",
            "date":"12th Jan 09",
            "salary":"$4,800"
        },
        ...
    ]
}
表格行内编辑及新增数据
      
<table id="example10" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
$(function() {
    /*demo10*/
    var counter = 0; //计数器为初始化每行的select
    var DT_ = COM_TOOLS.DT_init('example10', [{
            "data": "js_by_id",
            "title": 'id',
            //"visible": false
            "width": 30
        },
        {
            "data": null,
            "width": "30px",
            "title": '<span class="cus-checkbox-all"></span>',
            "className": "select-checkbox",
            "defaultContent": ''
        },
        {
            "data": "roleName",
            "title": '角色名称',
            "name": "roleName"
        },
        {
            "data": "organizationName",
            "title": '组织名称',
            "name": "organizationName"
        },
        {
            "data": "isCharge",
            "title": '是否主管',
            "name": "isCharge",
            render: function(data) {
                return data == 1 ? '<span style="color:green;">是</span>' : data == 0 ? '<span style="color:red;">否</span>' : data;
            }
        },
        {
            "data": null,
            "title": '操作',
            "defaultContent": '<button class="btn btn-danger btn-xs delet_btn no-Sel-obj">删除</button>&nbsp;&nbsp;'
        }
    ], '/dt/role/api', 'get', {}, {
        jsInitComplete: function(settings, json) {
            counter = this.rows().count(); //这里的this 指向的是datatable实例对象,等同于DT_.table;
        },
        other: {
            paging: false,
            pageLength: -1,
            processing: false, //显示加载中serverSide=true时生效
            serverSide: false, //是否开始服务器模式
            select: {
                style: 'mutil' 
            },
            orderFixed: [0, 'desc'],
            ordering: true,
            columnDefs: [{
                "orderable": false,
                "targets": "_all"
            }],
            ajax: {
                "dataSrc": function(dd) {
                    var D_ = dd.data;
                    for(var i = 0, ien = D_.length; i < ien; i++) {
                        D_[i]['js_by_id'] = 1 + i;
                    }
                    return D_;
                }
            }
        }
    });
    var table = DT_.table;
    window.yyy = table;
    
    var API_drop_jstree_ = null;
    /*select本地缓存数据*/
    var SELECT_DATA_ROLE=[{//SELECT_DATA_ROLE
        "id": "1",
        "text": "角色1"
        },
        {
            "id": "2",
            "text": "角色2"
        },
        {
            "id": "3",
            "text": "角色3"
        }];
    function addRow() {
        API_drop_jstree_ = null;
        ++counter;
        var $jRow = $('<tr class="js-add-data bg-info js-editor">' +
            '<td>' + counter + '</td><td></td>'+
            '<td><select style="width:300px;height:30px;" name="role-name" multiple="multiple" class=" role-name form-control input-sm" id="js_role_' + counter + '"></select></td>' +
            '<td><input type="text" name="org-name" readonly="readonly" placeholder="请选择" data-jstree="js-tree-box" class="org-name form-control js-tree-box js-input input-sm" /><input type="hidden" name="name5" class="tree-show-hiddenVal js-input"></td>' +
            '<td><select style="width:200px;" name="judge-leader" class="judge-leader form-control input-sm"><option value="">-请选择-</option><option value="1">是</option><option value="0">否</option></select></td>' +
            '<td></td></tr>');
        table.row.add($jRow).draw();
        COM_TOOLS.select2_init('js_role_' + counter,{/*select2-本地缓存数据*/
            ispinyi: true,
            multiple:true,
            other:{
                data:SELECT_DATA_ROLE
            }
            
        });
        
        API_drop_jstree_ = COM_TOOLS._view.cus_drop_jstree($jRow.find('.js-tree-box'), $jRow.find('.tree-show-hiddenVal'),{
            'hasPinyin' : true,
            'url' : '/jstree7/api',
            'groupName' : 'js-org-data'
        });
    }
    //var cur_user_id=; //当前用户id
    function validateRepeatAndIsNull(tr_) {
        if(!API_drop_jstree_.jstree_api) {
            COM_TOOLS.alert("角色名称、组织名称、是否主管的值不能为空");
            return false;
        };
        var $roleName_obj = tr_.find(".role-name option:selected"), //角色
            roleName_arr = [], //角色 ,多个
            org_arr = API_drop_jstree_.jstree_api.get_selected(true),
            judge_val = $.trim(tr_.find(".judge-leader").val()), //是否主管
            judge_txt = $.trim(tr_.find(".judge-leader option:selected").text()), //是否主管-名称
            Repeat_data = [],
            All_data = [],
            param_ = {};
            
        $roleName_obj.each(function(){
            roleName_arr.push({
                id:$(this).attr('value'),
                text:$(this).text()
            });
        });
        if(roleName_arr.length && org_arr.length && judge_val) { //非空
            var data_ = table.rows(":not(.js-editor)").data();
                
            $.each(data_, function(i, n) {
                All_data.push(n["roleId"] + n["organizationId"] + '');
            });
            if(roleName_arr.length > 1 && org_arr.length > 1) {
                COM_TOOLS.alert("角色名称与组织名称不能同时多选");
                return false;
            } else {
                if(org_arr.length > 1) {/*组织多个*/
                    $.each(org_arr,function(i){
                        if($.inArray(roleName_arr[0].id + org_arr[i].id + '', All_data) == -1) { //判断重复数据 与 拆条
                            ++counter;
                            table.row.add({
                                "js_by_id":counter,
                                "roleId": roleName_arr[0].id,
                                "organizationId":org_arr[i].id,
                                "isCharge": judge_val,
                                "userName": "王阳明",
                                "roleName": roleName_arr[0].text,
                                "organizationName": org_arr[i].text
                            }).nodes().to$().addClass("js-add-data").addClass("bg-info");
                            
                            table.row('.js-editor').remove();
                        } else {
                            Repeat_data.push(i);
                        }
                    })
                    param_["all_add_data"]=org_arr.length;/*新增条数*/
               
                } else if(roleName_arr.length > 1) {/*角色多个*/
                    
                    $.each(roleName_arr,function(i){
                        if($.inArray(roleName_arr[i].id + org_arr[0].id + '', All_data) == -1) { //判断重复数据 与 拆条
                            ++counter;
                            table.row.add({
                                "js_by_id":counter,
                                "roleId": roleName_arr[i].id,
                                "organizationId":org_arr[0].id,
                                "isCharge": judge_val,
                                "userName": "王阳明",
                                "roleName": roleName_arr[i].text,
                                "organizationName": org_arr[0].text
                            }).nodes().to$().addClass("js-add-data").addClass("bg-info");
                            table.row('.js-editor').remove();
                        } else {
                            Repeat_data.push(i);
                        }
                    })
                param_["all_add_data"]=roleName_arr.length;/*新增条数*/     

                } else {/*角色和组织都一条数据*/
                    if($.inArray(roleName_arr[0].id + org_arr[0].id + '', All_data) == -1) { //判断重复数据 与 拆条
                            ++counter;
                            table.row.add({
                                "js_by_id":counter,
                                "roleId": roleName_arr[0].id,
                                "organizationId":org_arr[0].id,
                                "isCharge": judge_val,
                                "userName": "王阳明",
                                "roleName": roleName_arr[0].text,
                                "organizationName": org_arr[0].text
                            }).nodes().to$().addClass("js-add-data").addClass("bg-info");
                            table.row('.js-editor').remove();
                        } else {
                            Repeat_data.push(1);
                        }
                    
                    param_["all_add_data"]=1;
                }
                table.draw();
            }
        } else {
            COM_TOOLS.alert("角色名称、组织名称、是否主管的值不能为空");
            return false;
        }
        param_["repeat_data"] = Repeat_data.length;
        param_["add_data"] = param_["all_add_data"] - Repeat_data.length;
        return param_;

    }
    //新增按钮
    $('#add_man').click(function() {
        var tr_ = table.rows('.js-editor').nodes().to$(); //1.
        if(tr_.length) {
            var param_ = validateRepeatAndIsNull(tr_);
            if(param_) {
                COM_TOOLS.alert(TEDU_MESSAGE.format("新增{0}条数据,重复{1}条数据", [param_["add_data"], param_["repeat_data"]]));
                table.row('.js-editor').remove().draw();
                addRow();
            }
        } else {
            addRow();
        }
    });

    //批量删除
    $("#all_delete_btn").click(function(){
        var that_=$(this);
        var id_=DT_.getSelectRowsData('js_by_id');
        if(id_.length==0){COM_TOOLS.alert("至少选择一条数据");return false;}
        COM_TOOLS.confirm("确认删除吗?", function(in_) {
                layer.close(in_);
                    COM_TOOLS.ajaxFn({
                        url: '/datatable/lty',
                        type: 'post',
                        data: id_,
                        success: function(data) {
                            table.rows(".selected").remove();
                            table.rows(".selected").nodes().to$().remove();
                            table.draw();
                            if(data.code == '1') {
                                COM_TOOLS.alert("操作成功");
                            } else {
                                COM_TOOLS.alert("操作失败");
                            }
                        },
                    }, 2, that_);
            })
        
        
    })
    //删除按钮 删除数据成功后不能立即刷新-
    table.on('click', 'tbody .delet_btn', function() {
        var that_ = $(this);
        var cur_tr = $(this).closest('tr');
        if(cur_tr.hasClass('js-add-data')) {
            COM_TOOLS.confirm("确认删除吗?", function(in_) { //防止误删
                layer.close(in_);
                table.row(cur_tr).remove(); //不建议立即刷新 只删除掉datatable的缓存数据
                cur_tr.remove(); //将demo删除掉
            });
        } else {
            //获取当前行的id
            var id_ = COM_TOOLS.DT_getRowsSourceData(table, cur_tr, 'js_by_id');
            COM_TOOLS.confirm("确认删除吗?", function(in_) {
                layer.close(in_);
                if(id_) {
                    COM_TOOLS.ajaxFn({
                        url: '/datatable/lty',
                        type: 'post',
                        data: id_,
                        success: function(data) {
                            table.row(cur_tr).remove();
                            cur_tr.remove();
                            if(data.code == '1') {
                                COM_TOOLS.alert("操作成功");
                            } else {
                                COM_TOOLS.alert("操作失败");
                            }
                        },
                    }, 2, that_);
                }
            })
        }
    });

    function savaData(btn_) {
        var data_ = JSON.stringify(COM_TOOLS.DT_getRowsSourceData(table, '.js-add-data:not(".js-editor")'));
        console.log("12345", data_);
        COM_TOOLS.ajaxFn({
            url: '/datatable/lty',
            type: 'post',
            dataType: 'json',
            data: data_,
            success: function(data, status) {
                if(data.code == '1') {
                    //并去掉class"add_data"
                    $('.js-add-data:not(".js-editor")').removeClass("bg-info").removeClass('js-add-data');
                    parent.COM_TOOLS.alert("操作成功");
                } else {
                    parent.COM_TOOLS.alert(data.msg, {
                        time: 5000
                    });
                }
            }
        }, 2, btn_);
    }
    //新-保存按钮 进行非空与去重验证
    $("#save_btn").click(function() {
        var that_ = $(this),
            tr_ = table.rows('.js-editor').nodes().to$(),
            tr_js_add = table.rows(".js-add-data:not(.js-editor)").nodes().to$();
        if(tr_js_add.length) {
            savaData(that_);
            COM_TOOLS.alert(TEDU_MESSAGE.format("新增{0}条数据", [tr_js_add.length]));
            return false;
        }
        if(tr_.length) {
            var param_ = validateRepeatAndIsNull(tr_);
            if(param_) {
                COM_TOOLS.alert(TEDU_MESSAGE.format("新增{0}条数据,重复{1}条数据", [param_["add_data"], param_["repeat_data"]]));
                table.row('.js-editor').remove().draw();
                addRow();
                if(param_["add_data"]!==0){savaData(that_);}/*存在新增数据 则保存数据*/
            }
        } else {
            addRow();
            return false;
        }

    });
    //刷新数据 将数据库中的数据同步到前台
    $('#refresh_btn').click(function() {
        COM_TOOLS.DT_ajaxReload(table);
    });
});
基础
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
组件
<link href="../css/plugins/dataTables/datatables.min.css" rel="stylesheet">
框架
<link href="../css/style.css" rel="stylesheet">
{
    "draw": 1, //必要。Datatables(客户端)发送的draw是多少那么服务器就返回多少。 这里注意,作者出于安全的考虑,强烈要求把这个转换为整形,即数字后再返回,而不是纯粹的接受然后返回,这是 为了防止跨站脚本(XSS)攻击。
    "recordsTotal": 57, //必要。即没有过滤的记录数(数据库里总共记录数)
    "recordsFiltered": 57, //必要。过滤后的记录数(如果有接收到前台的过滤条件,则返回的是过滤后的记录数)
    "data": [//必要。
        {
            "name":"Angelica",
            "age":"Ramos",
            "office":"System Architect",
            "address":"London",
            "date":"9th Oct 09",
            "salary":"$2,875"
        },
        {
            "name":"Ashton",
            "age":"Cox",
            "office":"Technical Author",
            "address":"San Francisco",
            "date":"12th Jan 09",
            "salary":"$4,800"
        },
        ...
    ]
}
常用配置
<style>
table .spanwhite-space {
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>

var table = $('#example1').DataTable( {
    scrollY:        "300px",//可选,是否固定表格高度,不包括表头;
    scrollX:        true,//可选是否显示水平滚动条;默认false;
    scrollCollapse: true,//与scrollY结合使用,是否固定高度,默认false;
    paging:         true,//是否显示分页组件
    pageLength:20,//每页显示条数;paging=false 时该值为 -1
    lengthChange:false, //是否允许用户改变表格每页显示的记录数,显示条数组件
    ordering : false,//是否启用排序组件,优先级高于columns中的排序控制;
    order: [[ 0, 'asc' ]], //表格在初始化的时候的排序,默认值是 [[0, 'asc']],提示,如果第一列不参与排序,且不显示排序图标,需要复写该值,例如 "order": []或"order": [[ 1, 'asc' ]]等;
    searching: false,//是否启用自带搜索组件;
    info: true, //是否显示数据条数信息
    language : {url:"js/plugins/datatables/zh_cn.js"},//自定义提示语言
    //destroy: true, //销毁一个已经存在的Datatables,然后创建一个新的
    /*
    分页按钮显示选项
    numbers 只显示数字
    simple 只有上一页和下一页两个按钮
    simple_numbers 上一页和下一页两个按钮,加上页数按钮
    full 首页,尾页,上一页和下一页四个按钮
    full_numbers 首页,尾页,上一页和下一页四个按钮,加上数字按钮
    first_last_numbers 首页,尾页两个按钮,加上数字按钮
    simple_numbers_no_totalpage 上一页和下一页两个按钮,加上页数按钮(不显示总页数)
    simple_numbers_input 上一页和下一页两个按钮,加上页数按钮,加跳页按钮(不带总页数:page => go)
    simple_numbers_inputAndPages 上一页和下一页两个按钮,加上页数按钮,加跳页按钮(带总页数:page/pages => go)
    simple_inputAndPages 上一页和下一页两个按钮,加跳页按钮(带总页数:page/pages => go)
     */
    pagingType: 'simple_numbers',
    columns: [//可选,必须定义全部列属性;data 对应数据接口字段名称
    /* {
        "data": null,
        "className": "text-center hhhdd",
        "width": "30px",
        render: function (data, type, row, meta) {
            // 显示行号(页码*size+curPageDataindex)
            // var startIndex = meta.settings._iDisplayStart;
            // return startIndex + meta.row + 1;
            return 1+meta.row; //当前页序号
        }
    }, */
    //data为null,不对应任何数据字段,并通过defaultContent自定义单元格内容,带数据的自定义参照render
    //{ "data": null, "defaultContent": '<input type="checkbox" name="checkbox1">' },
    //模拟checkbox
    //{ "data": null, "className":'select-checkbox', "defaultContent": ''},
    //带数据的
    { "data": "DT_RowId",
        "render": function(data, type, row, meta){ //data:当前字段DT_RowId;row:当前整行数据
            /* 将数据绑定在table元素上,不建议使用此方式,
             * 建议统一使用 tr:dataAPI进行数据绑定,详见下方 ajax-dataSrc
             */
            //return '<button class="btn btn-success btn-xs" type="button" data-itemtext = "'+row.name1+'" data-itemid = "'+data+'">选择</button>';
            return '<button class="btn btn-success btn-xs" type="button">选择</button>';
        }
    },
    /* 限制宽度并溢出。。。应用样式 .spanwhite-space
    {"data": "last_name","width":"30px", render: function (data, type, row, meta){
            return ''+data+'';
        }
    },
     */
    { "data": "first_name"},
    { "data": "last_name" },
    { "data": "position","className":"text-right" },
    { "data": "office","className":"text-center" },
    { "data": "start_date" },
    { "data": "salary" },
    { "data": "node1" },
    { "data": "node2" },
    { "data": "node3" }
    ],
    /*columnDefs: [{//可选,使用规则同columns,用来单独定义某几个列属性
        orderable: false,//是否可排序
        className: 'select-checkbox',//显示模拟复选框
        targets:   0  //将配置应用于某列,下标从0开始;
    }],*/
    /*fixedColumns:{//可选,锁定左侧、右侧各两列,需引用列冻结包
        leftColumns: 2,
        rightColumns: 2
    },*/
    //initComplete:function(settings, json ){resizeIframeHeight();},//组件及数据初始化完成 (iframe框架在右侧内容区时需要开启此方法)
    //drawCallback: function(settings){resizeIframeHeight();},//视图渲染完成,每次破坏性操作均出发该事件(iframe框架在右侧内容区时需要开启此方法)
    processing: true,//显示加载中,serverSide=true时生效
    serverSide: true,//服务器模式,排序、搜索、分页均在服务器端实现,默认浏览器模式
    select:{style:'mutil', info: false},//是否启用选中状态,需引入选中组件包,style:'mutil'为多选,默认单选'os'
    ajax: {
        "url": "/dt/api",//接口地址
        "dataSrc": function (dd) {
        /* 重构接口返回的数据结构,将需要交互的数据(pkeyid)以自定义键值对的形式存到‘DT_RowData’中,
         * 获取数据时使用$('tr').data('itemid')方式;
         */
            var D_ = dd.data;
            for ( var i=0, ien=D_.length ; i<ien ; i++ ) {
                D_[i]['DT_RowData'] = {
                    'itemid':D_[i]['DT_RowId'],
                    'itemtext':D_[i]['last_name']
                };
            }
            return D_;
        },
        "data": function(d){
        //自定义方法,仅限CRM框架中使用,重构发送到服务器端的参数结构;searchParemOBj_对象类型,为附加请求参数,不可使用保留字pageSize、start、draw;
            return cus_dt_ajaxdata(d,searchParemOBj_);
        }
    }
});
常用方法
/* API实例可以通过以下方式创建: */
$( selector ).DataTable();
$( selector ).dataTable().api();
new $.fn.dataTable.Api( selector );
上面三种方式均可返回一个api实例,注意区别 $( selector ).DataTable() 和 $( selector ).dataTable() 前者直接返回API实例,后者返回的是jQuery实例(如果是这个方式初始化Datatables,那么返回的对象不能使用api方法,不然会报方法未定义)
可以互转 ,jquery转api:dt.api();api转jquery:dt.to$();

var table = $('#myTable').DataTable();
OR:
var table = $('#myTable').dataTable().api();
OR:
var table = new $.fn.dataTable.Api( '#myTable' );

/**
 * @description datatable获取指定行的原始数据(服务器直接返回的数据ajaxJSON,及通过api.data实时设置的数据;非绑定数据)
 * @param {Object} dt (new datatable)实例对象
 * @param {String} name 选填,需要获取的字段名称,为空则返回整个data对象(非绑定的数据);
 * @param {Boolean}  isall=[false|true] 可选,是否获取所有行的数据(忽略是否选中);true:全部;false或缺省为 只计算选中行;
 * @return {Array} 数据数组
 */
DT_getSelectRowsSourceData (dt, name, isall);
/**
 *
 * @param {Object} dt (new datatable)实例对象
 * @param {Object} selector 行选择器,指定需要获取哪些行的数据; 支持jQ-selector、node、索引(row.index)、function ( idx, data, node ) => return true
 * @param {Object} name 选填,需要获取的字段名称,为空返回整行数据;
 */
DT_getRowsSourceData (dt, selector, name);

//var data = table.rows().data()[0];

//销毁实例(当表列配置信息变化时,必须通过API方式,销毁实例、清空节点后再重新初始化新表)
table.destroy();
$('#example1 thead, #example1 tbody').html(''); //先销毁实例,再清空节点;如果表头是自己构造的,则重新构造;

/* 获取选中行的数据(多选) */
//table 为当前页面作用域内初始化后的dt对象实例;selected类必须引入select包
//数据组成建议使用数据,利用join拼接,避免使用substring
var ids=[];
table.rows('.selected').nodes().to$().each(function(){
ids.push($(this).data('itemid'));
});
return ids.join(',');

/* 重新加载数据 */
table.ajax.reload(); //重新请求当前接口地址
table.ajax.url( 'newData.json' ).load(); //更改接口地址并请求
table.page(index).draw(false);  //跳转到第(index+1)页,index从0 开始

/* 应用当前数据重绘表格 */
table.draw();

/* 多列排序(配置) */
/*
第一列按照第一列和第二列排序作为默认排序
第二列按照第一列来排序作为默认排序
第三列按照第三,四,五列来排序作为默认排序
*/
$('#example').DataTable({
    "columns": [
        { "orderData": [ 0, 1 ] },
        { "orderData": 0, },
        { "orderData": [ 2, 3, 4 ] },
        ......
    ]
});

/* 多列排序(API) */
//第二,三列升序排列并且重绘:
var table = $('#example').DataTable();
table.order( [[ 1, 'asc' ], [ 2, 'asc' ]] ).draw();

//注意,API方式也会触发 columns.orderData的配置,如重复设置会出现多个,
//例如table.order( [[ 0, 'asc' ], [ 1, 'desc' ]] ).draw();
//将得到如下结果,order:[[ 0, 'asc' ], [ 1, 'asc' ], [ 1, 'desc' ]]; 前面两个是由于触发了 "orderData": [ 0, 1 ]

//读取排序信息
var table = $('#example').DataTable();
var order = table.order();
alert( '第 '+order[0][0]+' 列是排序列' )

/* 全选、全不选 */
table.rows().select();
table.rows().deselect();

/* 事件监听 */
// 真实checkbox联动事件,模拟的不需要
table.on('select', function ( e, dt, type, indexes ){
    if ( type === 'row' ) {
        var t_ = table.rows(indexes).nodes().to$(); //获取当前行,并转化为jQuery对象
        t_.find('input[type="checkbox"]').prop('checked',true);
    }
}).on('deselect', function ( e, dt, type, indexes ){
    if ( type === 'row' ) {
        var t_ = table.rows(indexes).nodes().to$();
        t_.find('input[type="checkbox"]').prop('checked',false);
    }
});

/* 获取指定列的原始数据项名称 (对应接口数据项) */
table.column('selector').dataSrc(); ==>'jsondata[name]'

/* table回调函数 */
createdRow( row, data, dataIndex )
//tr元素被创建时候的回调函数(当tr元素被创建(所有的td元素已经插入进去),或者给tr绑定事件,该回调函数被执行,允许操作tr元素 )
//row 已经被创建的tr元素 ;
//data 包含这行的数据对象 [array || object]
//dataIndex Datatables内部存储的数据索引

drawCallback(settings )
//Datatables每次重绘后执行的方法(当每次表格重绘的时候触发一个操作,比如更新数据后或者创建新的元素)
//settings Datatables的设置对象
"drawCallback": function( settings ) {
    var api = this.api();
    // 输出当前页的数据到浏览器控制台
    console.log( api.rows( {page:'current'} ).data() );
}

initComplete(settings, json)
//当表格完成加载绘制完成后执行此方法。(当每次表格重绘的时候触发一个操作,比如更新数据后或者创建新的元素 )
//settings datatables的设置对象
//json 如果使用ajax选项来获取数据,则得到服务器返回的数据,否则是 undefined


标签中(非可见)表格的初始化 或 $(window).trigger('resize')
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );