92 views

jQuery Datatable 自定义列

By | 2019年2月21日

jQuery Datatable是一个很实用的表格工具,我们可以参考下Datatable官网来查看具体的实例以及他对应的API。在这之前我们先不去讲如何实现后端的分页、排序、查找,本文着重详解如何对Datatable中的表格内容进行操作,以及如何改变它的样式、增加一列非数据列以及非数据列传递主键参数。

首要,让我们来表述我们的数据,文中就不去利用后端代码实现数据传递,就直接利用一个数据文件作为数据源。如下:

{
“data”: [
{
“name”: “Tiger Nixon”,
“position”: “System Architect”,
“salary”: “$320,800”,
“start_date”: “2011/04/25”,
“office”: “Edinburgh”,
“extn”: “5421”
},
{
“name”: “Garrett Winters”,
“position”: “Accountant”,
“salary”: “$170,750”,
“start_date”: “2011/07/25”,
“office”: “Tokyo”,
“extn”: “8422”
},
{
“name”: “Ashton Cox”,
“position”: “Junior Technical Author”,
“salary”: “$86,000”,
“start_date”: “2009/01/12”,
“office”: “San Francisco”,
“extn”: “1562”
}
// ……
]
}

接着,对于我们的页面代码进行编写,至于表格样式怎样编写,请参阅官方网提供的css,表格代码如下:

<table id=”example” class=”display” cellspacing=”0″ width=”100%”>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
<th>Operation</th> <!– 这一列为自定义列 –>
</tr>
</thead>

<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
<th>Operation</th> <!– 这一列为自定义列 –>
</tr>
</tfoot>
</table>

最终,我们主要来看JS怎么编写。由于我们的数据源是用Object数组,因而我们须要去定义我们的datatable每一列对应的数据列名。以便增多一列以实现更改列样式,删除和修改操作链接我们必须对具体的列进行定义,这里用到datatable的columnDefs,代码如下:

$(document).ready(function() {
$(‘#example’).dataTable({
“ajax” : ‘data.txt’,
“columns”: [
{ “data”: “name”, “visible”: false},
{ “data”: “position” },
{ “data”: “office” },
{ “data”: “extn” },
{ “data”: “start_date” },
{ “data”: “salary” }
],
“columnDefs”: [
// 将Salary列变为红色
{
“targets”: [5], // 目标列位置,下标从0开始
“data”: “salary”, // 数据列名
“render”: function(data, type, full) { // 返回自定义内容
return “<span style=’color:red;’>” + data + “</span>”;
}
},
// 增加一列,包括删除和修改,同时将我们需要传递的数据传递到链接中
{
“targets”: [6], // 目标列位置,下标从0开始
“data”: “name”, // 数据列名
“render”: function(data, type, full) { // 返回自定义内容
return “<a href=’/delete?name=” + data + “‘>Delete</a>&nbsp;<a href=’/update?name=” + data + “‘>Update</a>”;
}
}
]
});
});

wKiom1No-4vitj-nAAO71LtmPYo488.jpg

当我们去点击删除、更新链接时,都会发现我们传递进去的Name。注意:此处本实例将name列隐藏了,可以参考列定义中的配置。

本文转载于:http://win-man.com
作者:云漫网络
本文关键词:高防CDN 加速CDN 免备案CDN 服务器租用

发表评论

电子邮件地址不会被公开。 必填项已用*标注