jquerydatatable 全选，反选参考⽂档
1 版本号
DataTables 1.10.12
2 API ⽂档地址
官⽅option
官⽅(英⽂)
1.10.x 与1.9.x 参数名对照表
datatables 参数配置详解
服务器处理(Server-side processing)
api 使⽤详解
按钮⽂档
导出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 代码参考jquery官方文档下载
var tablelist;$(function(){ initTablelist();
});function initTablelist(){ tablelist = $('#tablelist').DataTable({
"select": {"style": 'single'},// single ：单⾏ multi ：多⾏ "dom":"<'#datatableTopBox.datatablesTop
StatusBar'<'#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.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 = priseId;
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"
注：
1. 私⼈配置drawCallback 项为空会重置datetable 导致⾃动悬停提⽰失效，若确实需要⽤到drawCallback ，需要在drawCallback ⾥⾯按照第⼆种⽅法配置
2. 除了不需要悬停提⽰的列⽤"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" data-id ="'+ priseId + '"/>'; } },
]
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,
2.blurable: true 点击表格意外地⽅，将失去选中
select: {
style: 'os',
blurable: true
}
3.复选框
select: {
style:'os',
selector: 'td:first-child'
},
4.多选⾏
>>#
select: {
style: 'multi'
}
5.单选
select: {
style: 'single'
}
6.获取选中
var count = ws( { selected: true } ).count();
var rowData = ws( indexes ).data().toArray();
7.全选和全不选
5.5 单⾏删除的⽅法(多⾏删除⽅法)
⽰例：点击某个单元格元素删除此⾏⽅法$('#example tbody').on( 'click', '.sorting_1', function () { $('
#example').DataTable().row( $(this).parents('tr') ).remove().draw();});$("#del").click(function(){ var rowData = ws('.selected').data(); if(rowData.length==0){
toastr.warning("请选择⼀条数据！"); return; }else{
var sid=rowData[0].sid; //主键 }
});
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 集成下拉框selectpicker5css:
.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 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.w( $(this).parent().parent() ).data());//下拉框所在⾏的值 });
},
5.10 获取datatables 的总⾏数(fnInitComplete 当中使⽤)##
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
BootStrap入门教程
« 上一篇
大二个人学习计划13篇
下一篇 »
发表评论