1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
{
"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"
}
// ......
]
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<
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
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
$(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> <a href='/update?name="
+ data +
"'>Update</a>"
;
}
}
]
});
});
|