33.dataTable

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);
                });

导包