jquery.datatable.js實際運用
阿新 • • 發佈:2018-12-12
$.dataTablesSettings = { deferRender: true,// 當處理大資料時,延遲渲染資料,有效提高Datatables處理能力 bStateSave: true,//表格狀態保持 searching: false,//搜尋框 bPaginate: true, // 翻頁功能 bLengthChange: true, // 改變每頁顯示資料數量 bFilter: true, // 過濾功能 bInfo: true,// 頁尾資訊 bAutoWidth: false,// 是否自動計算表格各列寬度 iDisplayLength: 10, bProcessing:false,//載入動畫 serverSide: true, // 啟用伺服器端分頁 ajax: function (data, callback, settings) { showLoading(); // 封裝請求引數 var param = {}; param.limit = data.length;// 頁面顯示記錄條數,在頁面顯示每頁顯示多少項的時候 param.start = data.start;// 開始的記錄序號 param.page = (data.start / data.length) + 1;//當前頁碼 param.keywords = $("#keywords").val(); param.park_id = $('#parks_value').val(); param.status = $('#status').val(); param.is_old = $('#is_old').val(); param.type_industry = $('#type_industry').val(); param.contract_type = $('#contract_type').val();var len = data.order.length; if (len > 1) { // 第一次以id排序 param.order = "id desc"; } else { // 單排序條件 if (data.order) { if (data.order[0].dir) { var index = data.order[0].column; var name = data.columns[index].name; param.order = name + " " + data.order[0].dir; } } } $.ajax({ type: 'post', url: xxx, data: param, dataType: 'json', success: function (res) { var returnData = {}; returnData.draw = parseInt(data.draw);// 這裡直接自行返回了draw計數器,應該由後臺返回 returnData.recordsTotal = res.total; returnData.recordsFiltered = res.total;// 後臺不實現過濾功能,每次查詢均視作全部結果 returnData.data = res.data; callback(returnData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("獲取失敗"); } }); }, columns: [{ data: function (mdata) { var html = ''; html += '<div class="checkbox"><input name="checks[]" value="' + mdata.id + '" class="select_checkbox" id="checkbox_' + mdata.id + '" type="checkbox"><label for="checkbox_' + mdata.id + '"></label></div>'; return html; }, orderable: false }, { data: "pName", orderable: false }, { data: "name", name: "name" }, { data: "cName", orderable: false }, { data: "room", orderable: false }, { data: "legalperson", orderable: false }, { data: "contact_phone", orderable: false }, { data: function (mdata) { if (mdata.status == 0) { return "<span style='color: #f8ac59'>未執行</span>"; } else if (mdata.status == 1) { return "<span style='color: #1c84c6'>已執行</span>"; } else { return "<span style='color: #ed5565'>已終止</span>"; } }, name: "status" }, { data: "start_date", name: "start_date" }, { data: "end_date", name: "end_date" }, { data: function (mdata) { if (mdata.is_c == 1) { return "<span style='color: #1c84c6'>已續簽</span>"; } else { return "<span style='color: #a8a8a8'>未續簽</span>"; } }, name: "is_c" }, { data: "area", orderable: false }, { data: function (mdata) { return "<span style='color:red;font-weight:bold;'>" + mdata.all_money + "</span>"; }, orderable: false }, { data: "uName", orderable: false }, { data: function (mdata) { var html = ''; var mark = mdata.mark.replace(/\ +/g, ""); if (mark) { var temp = mark.replace(/\n/g, "**"); html = '<a href="javascript:;" onclick="flag(' + mdata.id + ', \'' + temp + '\')">' + mark + '</a>'; } else { html = '<a href="javascript:;" onclick="flag(' + mdata.id + ',\'' + mark + '\')"><i class="fa fa-flag"></i></a>'; } return html; }, orderable: false }, { data: function (mdata) { var html = ''; if (is_look == true) { html += ' <button type="button" class="btn btn-info btn-xs" onclick="look(' + mdata.id + ')">檢視</button>'; } if (is_edit == true && mdata.status == 0) { html += ' <button type="button" class="btn btn-primary btn-xs" onclick="edit(' + mdata.id + ')">編輯</button>'; } if (is_change == true && mdata.status == 1) { html += ' <button type="button" class="btn btn-success btn-xs" onclick="continues(' + mdata.id + ', ' + mdata.status + ', \'' + mdata.end_date + '\')">續租</button>'; } if (is_end == true && mdata.status != 2) { html += ' <button type="button" class="btn btn-danger btn-xs" onclick="endBargain(' + mdata.id + ')">終止</button>'; } html += ' <button type="button" class="btn btn-default btn-xs" onclick="printBargain(' + mdata.id + ')">列印</button>'; return html; }, orderable: false }], fnInitComplete: function (oSettings, json) { hideLoading(); //表格渲染完成執行 }, drawCallback: function () { //表格每畫一次執行 }, columnDefs: [{ "orderable": false, "targets": 0 }], aaSorting: [[2, 'desc'], [7, 'desc'], [8, 'desc'],[9, 'desc'], [10,'desc']] }; initTable = $(".dataTables-example").dataTable($.dataTablesSettings);