dataTable
页面
<table id="operation_flow" class="table table-striped table-bordered table-hover" style="table-layout:fixed" width="100%" >
<thead>
<tr>
<th style="text-align: center;">序号</th>
<th style="text-align: center;">原部件名称</th>
<th style="text-align: center;">标准部件名称</th>
<th style="text-align: center;">系统</th>
<th style="text-align: center;">ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="static/javascript/common/plugin/dataTables2/jquery-confirm.min.js"></script>
js脚本
var resultDataTable=$('#operation_flow').dataTable();
if(resultDataTable){
resultDataTable.fnClearTable();
resultDataTable.fnDestroy();
}
operationTable = $('#operation_flow').dataTable({
"sDom": "<'dt-toolbar'<'col-sm-7 col-xs-12 hidden-xs'<'toolbar2'>><'col-xs-12 col-sm-5 hidden-xs'lC>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"bPaginate" : true, //是否显示(应用)分页器
"bInfo" : true, //是否显示页脚信息,DataTables插件左下角显示记录数
"bFilter" : false, //是否启动过滤、搜索功能
"bSort" : false,//是否启动各个字段的排序功能
"sScrollX": "100%",//横向滚动条
"lengthMenu":[12],//每页显示多少条数据
"lengthChange":false,//是否可以修改每页显示条数
//"aLengthMenu" : [10,25,50,100], // 更改显示记录数下拉选项
//"iDisplayLength" : 10, // 默认显示的记录数
"columnDefs":[{"targets":[4],"visible":false}],//隐藏列,下标从0开始
stripeClasses: [], //为奇偶行加上样式,兼容不支持CSS伪类的场合
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
autoWidth: true, //禁用自动调整列宽
orderMulti: false, //启用多列排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui
ajax: function (data, callback, settings) {
var param5 = {};
// 组装分页参数
param5.pageSize = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param5.start = data.start;//开始的记录序号
param5.pageNumber = (data.start / data.length)+1;//当前页码
//时间
param5.tpStartTime=viewMonth+"-01 00:00:00";
param5.tpEndTime=viewMonth+"-31 23:59:59";
//车型
param5.locoType=viewLocoType;
//车号
param5.locoNum=viewLocoNum;
param5.targ_duan='';
param5.groupduan_name='';
var url ="";
if(belong_dep_name=='劳动人事科'){
param5.hr_deptid=belong_dep;
url = Pl.Cutil.context + '/operationCon/getAllOperationFlows';
}else{//非劳人科人员只可查看自己的待签收流程数据
param5.dept_id=deptid;
url = Pl.Cutil.context + '/operationCon/getOperationsByUserDeptId';
}
$.ajax({
type: "POST",
url: url,
cache: false, //禁用缓存
data: param5, //传入组装的参数
dataType: "json",
success: function (result) {
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.total;//返回数据全部记录
returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.rows;//返回的数据列表
//调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
});
},
"aoColumns" : [
{
"mDataProp": "index",//序号
"sWidth": "4%",
"sClass": "text-center",
"render": function (data, type, full, meta) {
var c = meta.settings._iDisplayStart + meta.row + 1;
full.index=c;
return c;
},
},
{
"mDataProp" : "name",//原部件名称
"sWidth": "7%",
"sClass": "text-center",
"sContentPadding": "--",
},
{
"mDataProp" : "classicName",//标准部件名称
// "sWidth": "5%",
"sClass": "text-center",
"sContentPadding": "--",
},
{
"mDataProp" : "sys",//系统
"sWidth": "5%",
"sClass": "text-center",
"sContentPadding": "--",
},
{
"mDataProp" : "id",//ID
"sWidth": "4%",
"sClass": "text-center",
"sContentPadding": "--",
}],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
// "sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
}
}).api();
var divTool='';
if(belong_dep_name=='劳动人事科'){
divTool+='<button id="updateBut" type="button" title="修改" class="btn btn-sm btn-warning btn-addon "><i class="fa fa-pencil"></i>修改</button> '
+'<button id="sendBut" type="button" title="发布" class="btn btn-sm btn-success btn-addon "> 发布</button> '
+'<button id="queryDetails" type="button" title="查看" class="btn btn-sm btn-primary" > 查看 </button> '
+'<button id="querySigns" type="button" title="查看签收明细" class="btn btn-sm btn-primary" > 查看签收明细 </button> ';
}//姓名:工号:录入人:命令字号:类别:生效日期:
divTool+=
' <input id="kssj_query" type="text" name="request" style="width:115px;text-align:center;" placeholder="生效时间-起" class="form_datetime form-control" >'
+' 至 <input id="jssj_query" type="text" name="request" style="width:115px;text-align:center;" placeholder="生效时间-止" class="form_datetime form-control" >'
+'<div style="padding-top: 5px;padding-bottom: 5px;">'
+'<input id="id_query_name" type="text" style="width:90px;padding-top: 5px;" class="form-control" placeholder="姓名" />'
+' <input id="id_query_gh" type="text" style="width:90px;" class="form-control" placeholder="工号" />'
+' <input id="id_query_mlzh" type="text" style="width:90px;" class="form-control" placeholder="命令字号" />'
+' <input id="id_query_llr" type="text" style="width:90px;" class="form-control" placeholder="录入人" />'
+' 类别:<select Style="width: 155px;" id="id_query_lb" class="form-control"><option value="">全部</option></select>'
+'</div>';
$("div.toolbar2").html(divTool);
//姓名查询
$('#id_query_name').keyup(function () {
qu_name=$('#id_query_name').val();
operationTable.draw(false);
});
导包