Datatable组件可实现表格分页、排序、搜索、行列冻结等功能；常用jquery UI版本；bootstrap版本是基于该版本之上的； 官网地址：https://datatables.net/ 中文社区：http://datatables.club/
公共方法见: 常用公共方法库
<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"
},
...
]
}
<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"
}
}
);
});
| 序号 | 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">
| 操作 | 姓名 | 职位 | 账户 | 中心 |
|---|
<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">
| 序号 | 姓名 | 客户类型 | 下次回访日期 | 咨询顾问 | 创建人 | 创建时间 | 中心 |
|---|
<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">
| 序号 | 姓名 | 客户类型 | 下次回访日期 | 咨询顾问 |
|---|
<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> '
}
], '/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();
} );