angular-datatables学习与实践总结2
唐星晖
这篇文章记录一下datatables的一些主要设置
this
.
dtOptions
=
{
columns:
[
{
title:
'用户名'
,
data:
'name'
,
width:
'10%'
},
{
title:
'行政区名称'
,
data:
'xzqmc'
,
width:
'10%'
},
{
title:
'行政区代码'
,
data:
'xzqdm'
,
width:
'10%'
},
{
title:
'单位'
,
data:
'company'
,
width:
'30%'
,
render
:
(
data
,
type
,
row
,
meta
)
=>
{
//如果单位名称过长则用省略号隐藏
if
(
type
===
'display'
) {
if
(
data
&&
data
.
length
>
8
) {
return
data
.
substr
(
0
,
10
)
+
'<a href="javascript:void(0)">...</a>'
;
}
else
{
return
data
;
}
}
return
data
;
}
},
{
title:
'电话号码'
,
data:
'phone'
,
width:
'10%'
},
{
title:
'邮箱地址'
,
data:
'email'
,
width:
'10%'
},
{
title:
'审核'
,
data:
'state'
,
width:
'20%'
,
type:
'html'
,
className:
'auditTd'
,
render
:
(
data
,
type
,
row
,
meta
)
=>
{
if
(
row
.
state
==
0
) {
return
'<div>'
+
'<button class="agreeBtn btn btn-sm btn-raised btn-blue">通过</button>'
+
'<button class="refuseBtn btn btn-sm btn-raised btn-red">拒绝</button>'
+
'</div>'
;
}
else
{
return
'未通过审核'
}
}
}
],
columnDefs:
[
{
targets:
[
-
1
],
orderable:
true
,
orderSequence:
[
"asc"
,
"desc"
],
searchable:
false
},
{
targets:
'_all'
,
orderable:
false
,
searchable:
true
}
],
ajax
:
(
data
,
callback
)
=>
{
this
.
systemService
.
getAllUnauditUser
().
subscribe
(
userArr
=>
{
callback
(
userArr
);
})
},
pagingType:
'full_numbers'
,
pageLength:
5
,
scrollX:
true
,
scrollCollapse:
true
,
order:
[[
6
,
'desc'
]],
lengthMenu:
[[
5
,
10
,
-
1
], [
5
,
10
,
"All"
]],
processing:
true
,
rowCallback
:
(
row
,
data
,
index
)
=>
{
//每一行创建完成之后的回调函数
let
self
=
this
;
self
.
dtElement
.
dtInstance
.
then
((
dtInstance
:
DataTables
.
Api
)
=>
{
//用于获取datatable的实例
//对审核通过和拒绝button绑定相应的事件
if
(
$
(
'.agreeBtn'
,
row
).
length
>
0
) {
$
(
'.agreeBtn'
,
row
).
unbind
(
'click'
);
$
(
'.agreeBtn'
,
row
).
bind
(
'click'
, ()
=>
{
self
.
systemService
.
updateUserState
(
data
.
id
,
1
).
subscribe
(
result
=>
{
if
(
result
) {
alertFunctions
.
basicSuccess
(
'成功'
,
'用户'
+
data
.
name
+
'审核通过'
);
dtInstance
.
row
(
row
).
remove
();
dtInstance
.
draw
();
self
.
ifAudited
=
true
;
}
else
{
alertFunctions
.
basicError
(
'失败'
,
'用户'
+
data
.
name
+
'审核失败'
);
}
})
})
$
(
'.refuseBtn'
,
row
).
unbind
(
'click'
);
$
(
'.refuseBtn'
,
row
).
bind
(
'click'
, ()
=>
{
self
.
systemService
.
updateUserState
(
data
.
id
,
-
1
).
subscribe
(
result
=>
{
if
(
result
) {
$
(
'.auditTd'
,
row
).
html
(
'未通过审核'
);
data
.
state
=
-
1
;
dtInstance
.
draw
()
}
else
{
alertFunctions
.
basicError
(
'失败'
,
'拒绝通过审核失败'
);
}
})
})
}
//如果单位名称过长则绑定展开和收回事件
let
$a
=
$
(
'a'
,
row
);
if
(
$a
.
length
>
0
) {
$a
.
unbind
(
'click'
);
$a
.
bind
(
'click'
, ()
=>
{
if
(
$a
.
html
()
==
'...'
) {
$a
.
parent
(
'td'
).
html
(
data
.
company
+
'<a href="javascript:void(0)"><small>收回</small></a>'
);
}
else
{
$a
.
parent
(
'td'
).
html
(
data
.
company
.
substr
(
0
,
10
)
+
'<a href="javascript:void(0)">...</a>'
);
}
dtInstance
.
draw
()
})
}
})
},
createdRow
:
(
row
,
data
,
dataIndex
)
=>
{
},
preDrawCallback
:
(
settings
)
=>
{
},
language:
{
emptyTable:
"表中数据为空"
,
info:
"显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项"
,
infoEmpty:
"显示第 0 至 0 项结果，共 0 项"
,
infoFiltered:
"(由 _MAX_ 项结果过滤)"
,
infoPostFix:
""
,
thousands:
","
,
lengthMenu:
"显示 _MENU_ 项结果"
,
loadingRecords:
"载入中..."
,
processing:
"处理中..."
,
search:
"搜索:"
,
searchPlaceholder:
""
,
zeroRecords:
"没有匹配结果"
,
paginate:
{
first:
"首页"
,
last:
"末页"
,
next:
"下页"
,
previous:
"上页"
}
}
}
先看一下一些基本的设置：
pagingType：string 表示分页按钮布局，有6种内置的布局
numbers只显示数字 （1.10.8版本）simple只有上一页和下一页两个按钮simple_numbers上一页和下一页两个按钮，加上页数按钮（默认值）full首页，尾页，上一页和下一页四个按钮full_numbers首页，尾页，上一页和下一页四个按钮,加上数字按钮first_last_numbers首页，尾页两个按钮,加上数字按钮
pagingLength：number 表示每页有多少行数据（默认10）
scrollX：boolean 设置水平滚动，默认false。scrollY同理
scrollCollapse：boolean 当显示更少的记录时，是否允许表格减少高度。默认false
order：array 表格初始排序（注意在datatables中列数是从0开始的，也就是说0表示第一列）。默认会对第一列进行排序，即使设置了第一列不排序（orderable:false），如何不设置这个属性，表格初始化后第一列仍然会显示排序箭头，为避免这个bug一般要对这一属性进行设置。
lengthMenu：array 更改页面显示条数的下拉框选项，它可以是：
- 整数值的一维数组，用于显示的选项和显示长度的值
- 二维数组，第一个数组用来作为长度的值，第二个数组用来作为显示的选项。这是很有用的，比如当你想显示“所有”选项。分页长度值必须的大于
0，当为-1的时候，代表告诉DataTablse禁用分页（比如，显示所有数据）
processing：boolean 是否显示正在处理的状态。默认false
language：文字表示设置，具体意思见字面意思，这里就不多说了
比较常用的设置属性就介绍到这儿，后面的文章会介绍column、columnDefs等
类似资料：