//公共的table的请求方法 function commonDataTables(tableId, url, aoColumns, params, page, sort, aSort, playlength, fn, controlLen) { aSort = aSort == null ? [ [0, "desc"] ] : aSort; var dataLength = ""; if (!playlength) playlength = 15; $('#' + tableId).show(); var table = $('#' + tableId).DataTable({ "bPaginate": page, "bFilter": false, "bSort": sort, "aaSorting": aSort, "bServerSide": true, "bLengthChange": true, "bProcessing" : true, "bStateSave": params.length&¶ms[params.length-1].name == "iDisplayStartflag"?false:true, "aLengthMenu": [[15, 30, 60, 100], [15, 30, 60, 100]], "iDisplayLength": playlength, "sAjaxSource": url, "bDestroy": true, "bAutoWidth": true, "sServerMethod": "POST", "aoColumns": aoColumns, "scrollX": true, "scrollCollapse": true, "scrollY":tableId == "risk-table"?false:"600px", "sPaginationType": "full_numbers", // 用这个分页的样式是自己设计的 "fnServerParams": function (aoData) { for (var i = 0; i < params.length; i++) { aoData.push(params[i]); }; }, "fnServerData": function (sSource, aoData, fnCallback) { $.ajax({ url: sSource, type: "post", dataType: isDebug ? "json" : "jsonp", jsonp: "callback", data: { dt_json: $.toJSON(aoData) }, async: true, success: function (records) { var iTotalDisplayRecords = records.iTotalDisplayRecords,iTotalRecords = records.iTotalRecords; if(records.aaData.result){ var aaData = records.aaData.result; records={}; records.aaData = aaData; records.iTotalDisplayRecords = iTotalDisplayRecords; records.iTotalRecords = iTotalRecords; }; try { $('#loading_data').hide(); fn && fn(records); fnCallback(records); if (controlLen) { dataLength = records['iTotalRecords']; var pageLen = table.page.len(), pageCount = Math.floor(dataLength / pageLen); if(pageCount>1000){ alert('请缩小搜索范围'); $('#'+tableId).hide(); } } } catch (e) { console.log(e) } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); }, "oLanguage": { // "sLengthMenu": '每页显示 <select>' + '<option value="15">15</option>' + '<option value="30">30</option>' + '<option value="60">60</option>' + '<option value="90">90</option>' + '</select> 条记录', // "sZeroRecords": "暂时木有相关数据", // "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", // "sInfoEmtpy": "找不到相关数据", // "sInfoFiltered": "数据表*为 _MAX_ 条记录)", // "sProcessing": "正在加载中...", // "sSearch": "搜索", // "sUrl": "", // "oPaginate": { // "sFirst": "第一页", // "sPrevious": " 上一页 ", // "sNext": " 下一页 ", // "sLast": " 最后一页 " // } } }); return table; }; //页面调用渲染 var columns = [ {"title": "ID", "mData": "id"}, {"title": "类型", "mData": formattype}, {"title": "名称", "mData":"evname" }, {"title": "code", mData:'code',createdCell:formatCode}, {"title": "创建者", "mData": "creator_uid"}, {"title": "创建时间", "mData": "create_time"}, {"title": "{{_('table_base_operate')}}", "mData":"id",createdCell: formatOption} ]; var url="接口url"; var params = {}; //传的参数 commonDataTables("risk-table", url, columns, params, true, true) //最后一个true表示table要进行排序,传false表示不排序 在不排序的情况下,我们对列的自定义如 formattype 就可以了,直接定义mData为function function formattype(data) { var str = data['status'] == 1?"启用":"禁用"; return str; };
需要排序的情况下,使用上诉方式会报错,原因是该列的关键字段成了一个函数,无法找到 所以我们使用下面的方式进行自定义列的内容 - 要在column中保留mData对应的显示的字段,自定义渲染的内容通过createdCell的方法 function formatCode(cell,celldata,data) { var status = data['status']; var str = status==0?"初始化":status==1?"试运行":status==2?"进行中":"禁用"; $(cell).html(str); };