jquery datatable 全选，反选 参考文档
1 版本号
DataTables 1.10.12
2 API文档地址
http://datatables.club/reference/option/ 官方option
http://datatables.club/reference/api/
https://datatables.net/reference/option/ 官方(英文)
http://datatables.club/upgrade/1.10-convert.html 1.10.x与1.9.x参数名对照表
https://blog.csdn.net/zhu_xiao_yuan/article/details/51252300 datatables参数配置详解
http://datatables.club/manual/server-side.html 服务器处理(Server-side processing)
https://www.cnblogs.com/amoniyibeizi/p/4548111.html api使用详解
https://www.datatables.net/download/release各种datatables插件下载
https://github.com/ssy341/datatables-cn/issuesgithub问题收集
http://datatables.club/reference/button/ 按钮文档
http://datatables.club/reference/button/excel.html 导出excel的文档
3 常见操作项
表格（tables）列（Columns）行（Rows）单元格（Cells）核心方法（Core）工具类（Utilities）
4 初始化方法
4.1 HTML部分代码参考:
注：table table-striped table-bordered table-hover四个类名不能缺少，如缺少table会造成表头空白
<table id="tablelist" class="table table-striped table-bordered table-hover"></table>
4.2 JS代码参考
var tablelist;
$(function(){
initTablelist();
});
function initTablelist(){
tablelist = $('#tablelist').DataTable({
"select": {"style": 'single'},// single：单行 multi：多行
"dom":"<'#datatableTopBox.datatablesTopStatusBar'<'#datatableTopCon'><'.fl.datableSearch'f>B>rt<'info'l>p",
"buttons": [
{
text: '<i class="fa fa-plus"></i> '+$.i18n.prop('public.button.New'),
action: function ( e, dt, node, config ) {
gotoPurchaseOrderDetail();
}
},
],
"order":[],
"bStateSave":true,
"stateLoadParams": function (settings, data) {
data.search.search="";//清除搜索框信息
data.order = [ ];//进入页面乱序
if(!commonRentruJson.info.isReturn){
data.start=0;//显示第一页数据
}
},
"ajax":{
"data":{},
"url":$ctx + "",
},
"columns":[//设定列的所有初始属性
dataTableConfig.checkBoxColumn(),//复选框列
dataTableConfig.serialNumberColumn,//序号列
{"title":$.i18n.prop('TenderingManagement.RequisitionNumber'),"width":"70px","data": "purchaseCode","searchable": true},
{"title":$.i18n.prop('public.form.operate'),"width":"100px","data": null,"orderable":false,"searchable": false,"className":"notitle",
render:function(data,type,row,meta){
var id = data.enterpriseId;
var str;
if(data.auditState=="3"){//查看 编辑
str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a> <a onclick="gotoEdit(\"'+id+'\")">'+ $.i18n.prop('swal.Edit') +'</a>';
}else{
str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a>';//查看
}
return str;
},"visible":true,JMisMandatory:false,JMdisabled:false,JMcolumnAsign:"operatingData"
}//操作
],
"initComplete":function( settings, json){
dataTableOrdinalFunction(this);//序号列12345顺序显示
}
});
}
其他参考配置项：
"lengthChange":true,//是否允许用户改变表格每页显示的记录数
"searching":true, //搜索框
"bSort":true, //排序
5常用API整理
5.1 设置title提示：
第一种：最新方案（2019年8月27日13:48:35）
不配置drawCallback即可自动显示title悬停提示，不需要提示的列(如:操作列)增加"className": "notitle"
注：
- 私人配置drawCallback项为空会重置datetable导致自动悬停提示失效，若确实需要用到drawCallback，需要在drawCallback里面按照第二种方法配置
- 除了不需要悬停提示的列用"notitle"外，其它列如需要配置className时，命名不要包含notitle，因为在响应式中添加了notitle包含验证，若加上会导致此字段没有title效果
示例：
第二种：目前还生效，写配置时请尽可能采用第一种
注：如多列不需要悬停提示，td:not('notitle')即可（对应列需配置"className":"notitle"）
通用表示法
"drawCallback": function(settings, json){
$.each($("#"+ settings.sTableId +" tbody tr td:not(:last-child)"),function(i,v){
$(v).attr("title",$(v).text())
})
},
指定特定的ID
"drawCallback": function(oSettings, json){
$.each($("#WorkPermitApplyList tbody tr td:not(:last-child)"),function(i,v){
$(v).attr("title",$(v).text())
})
},
5.2第一列复选框
"aoColumns":[
{"title":"<input type='checkbox' style='display:block;width:15px;height:15px;margin-left:10px' onclick='checkAll(this)'>", "data":null,"width":"80px","bSortable": false},
],
"columnDefs":[
{ 'targets': [0],
"visible" : true,
'searchable':false,
'orderable':false,
'render': function (data, type, row){
return '<input type="checkbox" style="width: 15px;height: 15px;vertical-align:middle;margin-left:10px;" data-id ="'+ row.enterpriseId + '"/>';
}
},
]
5.3水平滚动条：
"scrollX": true, 已配置为默认配置
下面是最初用的解决滚动方法,需要去掉：
"initComplete":function( settings, json){//初始化结束后的回调函数
$("#contractList").wrap("<div class='datatables-scroll'></div>");
}
5.4 单选、多选、全选、全不选 事件
comtabsclick('example',initDatatables);//单行选中事件
comtabsclickm('example',initDatatables);//多行选中事件
以下是新增方案： "select": {"style": 'single'},// single：单行 multi：多行
1.简单调用
select: true, https://datatables.net/extensions/select/examples/initialisation/reload.html
2.blurable: true 点击表格意外地方，将失去选中
https://datatables.net/extensions/select/examples/initialisation/blurable.html
select: {
style: 'os',
blurable: true
}
3.复选框 https://datatables.net/extensions/select/examples/initialisation/checkbox.html
select: {
style:'os',
selector: 'td:first-child'
},
4.多选行 https://datatables.net/extensions/select/examples/initialisation/multi.html
select: {
style: 'multi'
}
5.单选 https://datatables.net/extensions/select/examples/initialisation/single.html
select: {
style: 'single'
}
6.获取选中
var count = table.rows( { selected: true } ).count();
var rowData = table.rows( indexes ).data().toArray();
7.全选和全不选
table.rows().select();
table.rows().deselect();
5.5 单行删除的方法(多行删除方法)
example.row(11).remove().draw(); row里面是第几行数据，从0开始
example.rows( '.selected' ).remove().draw() 删除表格中符合某类的数据(多行删除)
示例：点击某个单元格元素删除此行方法
$('#example tbody').on( 'click', '.sorting_1', function () {
$('#example').DataTable().row( $(this).parents('tr') ).remove().draw();
});
$("#del").click(function(){
var rowData = initDatatables.rows('.selected').data();
if(rowData.length==0){
toastr.warning("请选择一条数据！");
return;
}else{
var sid=rowData[0].sid; //主键
code...
}
});
5.6 排序设置
格式："order": [[ 0, 'asc' ],[ 1, "desc" ]]
asc:升序 desc:降序
5.7 table行点击前面复选框选中事件
$('#planTaskFeedbackConfirmList tbody').on('click', 'tr', function (e) {
if ($(this).hasClass('selected') ) {
$(this).removeClass('selected');
$(this).find(".checkbox_select").attr("checked",false);
}else {
$(this).addClass('selected');
$(this).find(".checkbox_select").attr("checked","checked");
}
});
5.8 重新绘制表
projectStaffPlanningDetailTable.destroy();
$("#projectStaffPlanningDetailTable").empty();
initMyTableTables(url);
直接重绘
var url = $ctx + "/module/invitingProject?projectSid="+$("#projectSid").val();
dataGridTables.ajax.url(url).load();
拼接参数问题
若需要重载函数且有拼接参数，参数写data里面，不要拼接在url后面,且重复请求时先重置data
function search(){
projectStatusListTables.settings()[0].ajax.data = {
jm_app: 'app',
userCode: USER_INFO.usercode,
project: $("#search-drop-down").val()
};
var url = $ctx + "/module/projectStatusManagement/findInfoList";
projectStatusListTables.ajax.url(url).load();
}
5.9 集成下拉框selectpicker5
css:
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width: 80%;
}
table.dataTable tbody tr td:last-child{
overflow: visible;
}
行添加事件
$("#btn").on("click",function(){
var rowJson = {
nociteSid:null,
tenderCode:1111,
tenderName:"11111",
bidOpeningDate:new Date(),
bidOpeningAddress:"还是",
isOpenRecord:"s"
};
$('#openBidRecoredListCall').DataTable().row.add(rowJson).draw();
})
"columnDefs": [
{
"targets":[-1],//扩展列显示列位置
"width":"190px",
"class": "but_xq",
"data":"taskSid",
"orderable":false,
"bSortable": false,
"searchable": false, //是否参与搜索
"mRender": function (data) {
return '<select style="width:60%;" class="selectpicker" data-live-search="true" data-size="5" ><option>1</option></select>';
}
}],
"drawCallback": function (settings, data) {
$('.selectpicker').selectpicker();
$('.selectpicker').unbind("changed.bs.select").on('changed.bs.select',function(e){
console.log($(this).val());//下拉框更新后的值
console.log(openBidRecoredListCall.row( $(this).parent().parent() ).data());//下拉框所在行的值
});
},
5.10 获取datatables的总行数(fnInitComplete当中使用)
var info = graphicSettings.page.info();
var dataRows = info.recordsTotal;
5.11 行绘制事件(例：默认行选中)
"createdRow": function( row, data, dataIndex ) {
if ( data.creator == "夏云飞" ) {
$(row).find("td:eq(2)").css("color","red");
$(row).find("td:eq(0)").attr("checked","true");
$(row).addClass( 'selected' );
}
},
5.12 切换人员/项目后datatables显示为空
原因：上一个table分页有100并且选择了第100页，现在只有50页面，bStateSave保存了状态，导致table选择的是第100页，所以页面显示空
解决办法："bStateSave":false, //设置为false
注释说明：状态保存(stateSave)，开启或者禁用状态储存。当你开启了状态储存，Datatables会存储一个状态到浏览器上， 包含分页位置，每页显示的长度，过滤后的结果和排序。当用户重新刷新页面，表格的状态将会被设置为之前的设置。
5.13 单选 多选
参数：tabid,tabs
comtabsclick('example',initDatatables); 单选方法
comtabsclickm('example',initDatatables); 多选方法
5.14 上移 下移功能
onclick='tableMoveUpward("#setUpBlock")' 上移
onclick='tableMoveDownward("#setUpBlock")'下移
注：暂时只适合只有一页的情况下
5.15 拖动列宽
<script src="<c:url value='/css/datatables/media/js/colresizable.js?v=${version}'/>"></script>
"initComplete": function(oSettings, json){
$('#documentListTables').colResizable();
},
https://github.com/Silvacom/colResize github参考样例
http://www.bacubacu.com/colresizable/插件官网
参考这位大佬来筛写的，有兴趣可去看 https://www.yuque.com/jmweb/pc/datatables
