Datatables 定製化配置方法以及對常用操作的二次封裝
阿新 • • 發佈：2019-01-18
Datatables功能強大，但是配置稍顯複雜。先後在遇到兩個使用Datatables作為表格資料展示與操作的專案，總結出一些經驗和方法，分享給大家。
最常見的資料展示table
該table只負責資料的展示與刪除等較簡單的功能，不涉及資料的編輯，配置也比較簡單。
HTML程式碼
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th HTML頁面只做最基礎的定義操作，其他配置都在js中進行設定。
JS程式碼
var DatatableTest = {
dt :null DataTablePaging
ar DataTablePaging = {
language : {
zh_cn : {
processing : "資料正在載入中...",
search : "查詢:",
lengthMenu : "每頁顯示 _MENU_ 條記錄",
info : "從 _START_ 到 _END_ /共 _TOTAL_ 條記錄",
infoEmpty : "從 0 到 0 共 0 條記錄",
infoFiltered : "(從 _MAX_ 條資料中檢索)",
infoPostFix : "",
thousands : ",",
loadingRecords : "資料載入中...",
zeroRecords : "沒有檢索到資料",
emptyTable : "沒有資料",
paginate : {
first : "首頁",
previous : "前一頁",
next : "後一頁",
last : "尾頁"
},
aria : {
sortAscending : ": 升序",
sortDescending : ": 降序"
}
}
},
/**
* 獲取ajax分頁options設定
*/
getAjaxPagingOptions : function(settings) {
var options = {
ajax : {
url : settings.ajaxUrl,
type : "post"
},
serverSide : true,
destroy : true,
processing : true,
ordering : true,
searching : false,
paging : true,
pagingType : "full_numbers",
lengthMenu : [ 10, 20, 50, 100 ],
pageLength : 20,
order : settings.order,// [index,'asc|desc']
language : DataTablePaging.language.zh_cn,
columns : settings.colums,
columnDefs : settings.columsdefs,
};
return options;
},
/**
* 獲取ajax不分頁options設定
*/
getOptions : function(settings) {
var options = {
ajax : {
url : settings.ajaxUrl,
type : "post"
},
serverSide : false,
destroy : true,
processing : true,
ordering : true,
searching : false,
pagingType : "full_numbers",
lengthMenu : [ 10, 20, 50, 100 ],
pageLength : 20,
language : DataTablePaging.language.zh_cn,
columns : settings.colums,
columnDefs : settings.columsdefs,
};
return options;
},
/**
* 獲取非ajax分頁options設定
*/
getNotAjaxPagingOptions : function(settings) {
var options = {
serverSide : false,
destroy : true,
processing : true,
ordering : false,
searching : false,
paging : true,
pagingType : "full_numbers",
lengthChange : false,
pageLength : settings.pageLength,
info : false,
language : DataTablePaging.language.zh_cn,
columns : settings.colums,
columnDefs : settings.columsdefs
};
return options;
},
/**
* 獲取非ajax不分頁options設定
*/
getNotAjaxOptions : function(settings) {
var options = {
serverSide : false,
destroy : true,
processing : true,
ordering : false,
searching : false,
paging : false,
scrollX : true,
info : false,
language : DataTablePaging.language.zh_cn,
columns : settings.colums,
columnDefs : settings.columsdefs
};
return options;
}
};複雜Datatables的配置
在實際開發中，我們往往會遇到比較複雜的tables的顯示與修改，Datatables同樣可以滿足我們的需求。例如下圖中的table
該table中實現了自定義可編輯行、行變換、新增行、刪除行、table狀態儲存、ajax提交以及重新整理等操作，覆蓋了大多數的常用操作。程式碼如下。
HTML程式碼
<div id="wid-id-1">
<header>
<div role="menu">
<a href="javascript:void(0);" id="btnSqlColumnDtAddRow" title="增加一行" data-placement="bottom" data-original-title="增加"><i class="fa fa-plus-circle"></i></a> <a href="javascript:void(0);" class="button-icon" id="btnSqlColumnDtUp"rel="tooltip" title="上移一行" data-placement="bottom" data-original-title="上移"><i class="fa fa-arrow-circle-up"></i></a> <a
href="javascript:void(0);" class="button-icon" id="btnSqlColumnDtDown" rel="tooltip" title="下移一行" data-placement="bottom"data-original-title="下移"><i class="fa fa-arrow-circle-down"></i></a> <a ref="javascript:void(0);" class="button-icon"id="btnSqlColumnDtRemoveRow" el="tooltip" title="刪除選中行" data-placement="bottom" data-original-title="刪除"><i class="fa fa-minus-circle"></i></a>
</div>
<h2>SQL列配置</h2>
</header>
<div>
<div class="jarviswidget-editbox"></div>
<div class="widget-body no-padding">
<table id="sqlColumnDt" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>行號</th>
<th>列名</th>
<th>標題</th>
<th>型別</th>
<th>資料型別</th>
<th>寬度</th>
<th>精度</th>
<th>排序型別</th>
<th>配置</th>
</tr>
</thead>
</table>
</div>
</div>
</div>例項化Datatables程式碼
initSqlColumnDt : function() {
var options = DataTablePaging.getNotAjaxOptions({
colums : [ {
data : "index"
}, {
data : "name"
}, {
data : "text"
}, {
data : "type"
}, {
data : "dataType"
}, {
data : "width"
}, {
data : "decimals"
}, {
data : "sortType"
} ],
columsdefs : [ {
"targets" : [ 0 ],
"data" : "index",
"render" : ReportDesigner.datatables.renderIndexColumn
}, {
"targets" : [ 1 ],
"data" : "name",
"render" : ReportDesigner.datatables.sqlColumnDt.renderNameColumn
}, {
"targets" : [ 2 ],
"data" : "text",
"render" : ReportDesigner.datatables.sqlColumnDt.renderTextColumn
}, {
"targets" : [ 3 ],
"data" : "type",
"render" : ReportDesigner.datatables.sqlColumnDt.renderTypeColumn
}, {
"targets" : [ 6 ],
"data" : "decimals",
"render" : ReportDesigner.datatables.sqlColumnDt.renderDecimalsColumn
}, {
"targets" : [ 7 ],
"data" : "sortType",
"render" : ReportDesigner.datatables.sqlColumnDt.renderSortTypeColumn
}, {
"targets" : [ 8 ],
"render" : ReportDesigner.datatables.sqlColumnDt.renderOptionsColumn
} ]
});
ReportDesigner.sqlColumnDt = $('#sqlColumnDt').DataTable(options);
//行選中效果的實現
$('#sqlColumnDt tbody').on('click', 'tr', function() {
ReportDesigner.sqlColumnDt.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
});
},其他配置
sqlColumnDt : {
//獲取行資訊
getMetaRows : function() {
var rows = [];
ReportDesigner.sqlColumnDt.rows().indexes().each(function(idx) {
rows.push(ReportDesigner.sqlColumnDt.row(idx).data())
});
return rows;
},
//載入資料
loadData : function(rows) {
for ( var row in rows) {
ReportDesigner.sqlColumnDt.row.add(rows[row]).draw();
}
},
//單行資料載入
loadRows : function(newRows) {
var metaRows = ReportDesigner.datatables.sqlColumnDt.getMetaRows();
if (metaRows == null || metaRows.length == 0) {
return ReportDesigner.datatables.sqlColumnDt.loadData(newRows);
}
var currRows = ReportDesigner.datatables.sqlColumnDt.getRows(metaRows);
var oldRowMap = {};
for (var i = 0; i < currRows.length; i++) {
var name = currRows[i].name;
oldRowMap[name] = currRows[i];
}
for (var i = 0; i < newRows.length; i++) {
var name = newRows[i].name;
if (oldRowMap[name]) {
oldRowMap[name].dataType = newRows[i].dataType;
oldRowMap[name].width = newRows[i].width;
newRows[i] = oldRowMap[name];
}
}
$.each(currRows, function(i,row){
if(row.type == 4) newRows.push(row);
});
ReportDesigner.datatables.sqlColumnDt.clear();
return ReportDesigner.datatables.sqlColumnDt.loadData(newRows);
},
//獲取整行所有資訊
getRows : function(metaRows) {
for (var rowIndex = 0; rowIndex < metaRows.length; rowIndex++) {
var row = metaRows[rowIndex];
var subOptions = ReportDesigner.datatables.sqlColumnDt.getCheckboxOptions(row.type);
for (var optIndex = 0; optIndex < subOptions.length; optIndex++) {
var option = subOptions[optIndex];
var optionId = "#" + option.name + rowIndex;
row[option.name] = $(optionId).prop("checked");
}
//此處需根據table做相應修改
row["name"] = $("#name" + rowIndex).val();
row["text"] = $("#text" + rowIndex).val();
row["type"] = $("#type" + rowIndex).val();
row["sortType"] = $("#sortType" + rowIndex).val();
row["decimals"] = $("#decimals" + rowIndex).val();
}
return metaRows;
},
//資料型別配置列
getColumnTypeMap : function(rows) {
var typeMap = {
"layout" : 0,
"dim" : 0,
"stat" : 0,
"computed" : 0
};
for (var i = 0; i < rows.length; i++) {
if (rows[i].type == 1)
typeMap.layout += 1;
else if (rows[i].type == 2)
typeMap.dim += 1;
else if (rows[i].type == 3)
typeMap.stat += 1;
else if (rows[i].type == 4)
typeMap.computed += 1;
}
return typeMap;
},
getEmptyExprColumns : function(rows) {
var emptyColumns = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.type == 4 && $.trim(row.expression) == "") {
emptyColumns.push(row.name);
}
}
return emptyColumns;
},
//checkbox配置列
getCheckboxOptions : function(type) {
var checkboxOptions = [];
if (type == 4) {
checkboxOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 1;
});
} else if (type == 3) {
checkboxOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 1 || option.type == 2;
});
} else {
checkboxOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 3;
});
}
return checkboxOptions;
},
clear : function() {
ReportDesigner.sqlColumnDt.clear().draw();
},
//新增行
addRow : function() {
ReportDesigner.sqlColumnDt.row.add({
"name" : "",
"text" : "",
"type" : "4",
"dataType" : "DECIMAL",
"width" : "42",
"decimals" : "",
"sortType" : "",
"options" : ""
}).draw();
},
//刪除行
delRow : function() {
ReportDesigner.sqlColumnDt.rows('.selected').remove().draw();
//rows = ReportDesigner.datatables.sqlColumnDt.getMetaRows();
//ReportDesigner.datatables.sqlColumnDt.loadRows(rows);
},
//提升行拍尋
upRow : function() {
var index = ReportDesigner.sqlColumnDt.row('.selected').index();
ReportDesigner.datatables.resortRows(index, 'up', ReportDesigner.sqlColumnDt);
},
//降低行排序
downRow : function() {
var index = ReportDesigner.sqlColumnDt.row('.selected').index();
ReportDesigner.datatables.resortRows(index, 'down', ReportDesigner.sqlColumnDt);
},
renderNameColumn : function(data, type, row, meta) {
var index = meta.row;
var id = "name" + index;
return "<input style=\"width:98%;\" type=\"text\" id=\"" + id + "\" name=\"name\" value=\"" + row.name + "\" />";
},
renderTextColumn : function(data, type, row, meta) {
var index = meta.row;
var id = "text" + index;
return "<input style=\"width:98%;\" type=\"text\" id=\"" + id + "\" name=\"text\" value=\"" + row.text + "\" />";
},
renderDecimalsColumn : function(data, type, row, meta) {
var index = meta.row;
var id = "decimals" + index;
if (!row.decimals) {
row.decimals = 0;
}
return "<input style=\"width:42px;\" type=\"text\" id=\"" + id + "\" name=\"text\" value=\"" + row.decimals + "\" />";
},
//select配置
renderTypeColumn : function(data, type, row, meta) {
var index = meta.row;
var options = [ {
text : "佈局列",
value : 1
}, {
text : "維度列",
value : 2
}, {
text : "統計列",
value : 3
}, {
text : "計算列",
value : 4
} ];
var id = "type" + index;
var count = options.length;
var selectHtmlText = "<select id=\"" + id + "\" name=\"type\">";
for (var i = 0; i < count; i++) {
var selected = options[i].value == row.type ? 'selected="selected"' : '';
selectHtmlText += "<option value=\"" + options[i].value + "\" " + selected + ">" + options[i].text + "</option>";
}
selectHtmlText += "</select>";
return selectHtmlText;
},
renderSortTypeColumn : function(data, type, row, meta) {
var index = meta.row;
var options = [ {
text : "預設",
value : 0
}, {
text : "數字優先升序",
value : 1
}, {
text : "數字優先降序",
value : 2
}, {
text : "字元優先升序",
value : 3
}, {
text : "字元優先降序",
value : 4
} ];
var id = "sortType" + index;
var count = options.length;
var selectHtmlText = "<select id=\"" + id + "\" name=\"sortType\">";
for (var i = 0; i < count; i++) {
var selected = options[i].value == row.sortType ? 'selected="selected"' : '';
selectHtmlText += "<option value=\"" + options[i].value + "\" " + selected + ">" + options[i].text + "</option>";
}
selectHtmlText += "</select>";
return selectHtmlText;
},
renderOptionsColumn : function(data, type, row, meta) {
var index = meta.row;
var subOptions = [];
//4:計算列,3:統計列,2:維度列,1:佈局列
if (row.type == 4) {
subOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 1 || option.type == 2 || option.type == 4;
});
} else if (row.type == 3) {
subOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 1 || option.type == 2;
});
} else {
subOptions = $.grep(ReportDesigner.sqlColumnOptions, function(option, i) {
return option.type == 2 || option.type == 3;
});
}
var htmlOptions = [];
for (var i = 0; i < subOptions.length; i++) {
var name = subOptions[i].name;
var id = name + index;
var text = subOptions[i].text;
var checked = row[name] ? " checked=\"checked\"" : "";
var html = "";
if (name == "expression" || name == "memo" || name == "format") {
var imgSrc = XFrame.getContextPath() + "/assets/modules/report/icons/"+ name +".png";
var onClick = " onclick =\"javascript:ReportDesigner.dialog."+ name +"Dlg.show("+ index +")\"";
html = "<img style=\"cursor: pointer;\" id=\"" + id + "\" title=\"" + text + "\" src=\"" + imgSrc + "\"" + onClick + "/>";
} else {
html = "<input type=\"checkbox\" id=\"" + id + "\" name=\"" + name + "\"" + checked + ">" + text + "</input>";
}
htmlOptions.push(html);
}
return htmlOptions.join(" ");
},
saveExpression : function() {
var row = ReportDesigner.sqlColumnDt.row('.selected').data();
row.expression = $("#columnExpression").val();
$('#expressionDlg').modal("hide");
},
saveMemo : function() {
var row = ReportDesigner.sqlColumnDt.row('.selected').data();
row.comment = $("#columnMemo").val();
$('#memoDlg').modal("hide");
},
saveFormat : function() {
var row = ReportDesigner.sqlColumnDt.row('.selected').data();
row.format = $("#columnFormat").val();
$('#formatDlg').modal("hide");
}相關推薦
Datatables 定製化配置方法以及對常用操作的二次封裝
Datatables功能強大，但是配置稍顯複雜。先後在遇到兩個使用Datatables作為表格資料展示與操作的專案，總結出一些經驗和方法，分享給大家。 最常見的資料展示table 該table只負責資料的展示與刪除等較簡單的功能，不涉及資料的編輯，配
vue項目中對axios的二次封裝
出現 公司 數據 spa adding export ring mes style 近來在使用vue重構公司m站時，使用了axios來進行數據的請求，由於項目的需要，對axios進行了二次封裝，點擊進入axios //引入axios import axios
vue專案中對axios的二次封裝
近來在使用vue重構公司m站時，使用了axios來進行資料的請求，由於專案的需要，對axios進行了二次封裝，點選進入axios //引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axio
MySQL免安裝版配置方法以及MySQL視覺化工具Navicat for MySQL 安裝和破解
一、MySQL免安裝版配置方法（圖片中的路徑與文字方法路徑有出入，自行修改） 1、配置環境變數： 1)新建MYSQL_HOME變數，並配置: D:\ mysql-5.6.42-winx64 MYSQL_HOME：D:\ mysql-5.6.42-winx64 2)編
webpack 4.0 配置方法以及錯誤解決
文件目錄 pts 版本 創建目錄 efault ebp 大堆 添加 安裝 選取一個空目錄來試驗 全局安裝webpack4.1之後 創建目錄 mkdir webpacktest && cd webpacktes 初始化package.json npm init
【科技】原根的快速判斷方法以及對1求離散對數的另一種想法
鑑於實際需要，本文中所選的模數$p$總是一個平凡質數，並用$\phi$表示$\phi (p) = p - 1$。 原根的定義： 基於$p$是質數，我們可以很簡單的把它的定義想成，如果一個數$a \in [0, p - 1]$是原根的充要條件是對於$x \in [0, p - 2]$，$a^{x}$互不相同
3、對selenium常用方法進行二次封裝
在basepage.java中對selenium常用方法進行封裝，後續頁面元素封裝都繼承該類。 重點見紅框，建構函式需要傳入一個driver，這是為了保證寫指令碼時所使用的是同一個driver 程式碼如下： package framework;import org.openqa.sel
VS2013下Qt5.6.1專案配置方法以及各種問題彙總
一、QtCreator與VS2013下Qt1.QtCreator裡有：Editor, Assistant, Designer, Debuger因此，Qt Creator是一個IDE，也就是一個整合開發環境，裡面有程式碼編寫器，編譯器，偵錯程式，還有圖形設計器Qt Design
關於Datatables editor 的使用細節以及資料格式（第一次部落格，希望對有需要的人有幫助）
最近因為公司專案要做一個可編輯表格，我採用的是bootstrap的前端框架，使用打datatable editor來實現這個功能。下面具體寫開發過程以及問題： 首先你應該找相關資源：資料地址 效果圖： 可以實現單個表格編輯。然後下拉到頁面最後找到下面目錄： 選擇inlin
SpirngMVC系統啟動系統配置初始化執行順序以及防止onApplicationEvent執行兩次
Spirng系統啟動容器執行順序 這裡面加入了springMVC,因此基本的啟動執行後用到的過載方法都列出來了，下面的logger.info中給出了前後執行的順序次序，可以根據自己的需求進行修改，但是這個時候，會存在一個問題onApplicationEvent
c++中建構函式初始化的方法以及主要區別
一、我的問題是關於初始化C++類成員的。我見過許多這樣的程式碼： CSomeClass::CSomeClass() { x=0; y=1; } 而在別的什麼地方則寫成下面的樣子： CSomeClass::CSomeClass() : x(0), y(1) { } 我的一些程式設計師朋友說第
Openstack RabbitMQ配置管理以及對SSL的支援
SSL檔案： [[email protected] ssl]# pwd /etc/rabbitmq/ssl [[email protected] ssl]# ls cacert.pem cert.pem key.pem RabbitMQ 中SSL配置
檢視Oracle的連線，以及對會話操作
#檢視當前不為空的連線select * from v$session where username is not null #檢視不同使用者的連線數 select username,count(username) from v$session where username
Idea建立Java工程以及對Module操作
四、建立 Java 工程，執行 HelloWorld 1.建立 Java 工程 Create New Project:建立一個新的工程 Import Project:匯入一個現有的工程 Open:開啟一個已有工程。比如：可以開啟 Eclipse 專案。 Check ou
快速上手Mac效率神器Alfred以及Alfred常用操作
前言 Alfred，想必大家就算沒用過也耳聞過。Alfred是一個讓你可以丟掉滑鼠的神器。很多讀者可能之前認為Alfred的學習成本高，或者感覺它太複雜，而望之卻步。其實Alfred並非高不可攀，本文以Alfred3.0為基礎，一步步進行Alfred的常用操作，帶領大家進入Alfred的
C# 系統應用之窗體最小化至工作列及常用操作
一.介面操作 1.建立"Windows窗體應用程式"專案,從"工具箱"中新增NotifyIcon(執行時期間在Windows工作列右側的通知區域顯示圖示).滑鼠右擊notifyIcon1屬性,為控制元件屬性Icon新增圖示,Text屬性為"CSDN". 2
Mac效率神器Alfred以及Alfred常用操作
前言Alfred，想必大家就算沒用過也耳聞過。Alfred是一個讓你可以丟掉滑鼠的神器。很多讀者可能之前認為Alfred的學習成本高，或者感覺它太複雜，而望之卻步。其實Alfred並非高不可攀，本文以Alfred3.0為基礎，一步步進行Alfred的常用操作，帶領大家進入Al
float型資料寫入eeprom，以及對eeprom操作的注意事項
做專案需要將float型資料存到微控制器自帶的eeprom裡，微控制器型號是STC12C5A60S2。不過每次只能對一個位元組進行操作即unsigned char型。之前存過unsigned long型的其實是一樣的他們都要佔用四個位元組。可以用聯合的方法，這裡提供個簡單的
3、在basepage.py中對selenium方法進行二次封裝
新建一個basepage.py，姑且叫做基礎頁面類吧，裡邊對selenium的常用方法做了封裝，採用POM模式封裝的頁面都繼承這個類，以達到程式碼簡化及程式碼複用的效果。# coding=utf-8 import time from framework.browser_eng
對 oracle 資料庫日期格式，以及對日期操作的理解
剛才我寫了一條sql 語句：如下 select * from t_f63_final_operate_history t where oper_Date >= to_date('2014-10-21','yyyy-mm-dd') and oper_Date <