jquery.dataTables.js
dataTables.bootstrap.js
bootstrap-tokenfield.js
以上是涉及到的库文件,使用tokenfield是为了保存当前用户所选的dataTables中的数据记录
在html中只有下面一个标签
<span style="font-size:18px;"><table id="handlePersonDT" class="table table-striped table-condensed table-hover" width="100%"></table></span>
在JS中的JQuery代码如下:
$(function () {
loadHandlePersonDT();
})
function loadHandlePersonDT(){
var table = $("#handlePersonDT").DataTable({
destroy: true, // 允许重新实例化Datatables
serverSide: true, // 开启服务器模式
sort: false, // 是否排序
filter: false, // 是否显示过滤框
processing: false, // 是否显示正在加载
pagingType: 'simple', // 分页风格{simple, simple_numbers, full, full_numbers}
lengthChange: false, // 是否启用设置每页显示记录数
displayLength: 8, // 默认选中的搜索数量
language: {
url: contextPath + '/ODSMSPortlet/DataTables/resources/zh_ZH.txt' // 初始化表格样式
},
ajax: {
url: '/ODSMSPortlet/questionF/questionSysF!getChoosePeopleList.action?random='+Math.random(),
type: 'post',
data: function (d){
d.queryDeptName = $('#queryDeptName').val();
}
},
columns: [
{title: '员工Id', data: 'staffId', defaultContent: ''},
{title: '员工Code', data: 'staffCode', defaultContent: ''},
{title: '姓名', data: 'staffName', defaultContent: ''},
{title: '所在部门', data: 'departName', defaultContent: ''}
],
createdRow: function( row, data, dataIndex ) {
var handlePersonArrTF = $('#handlePersonArrTF').tokenfield('getTokens');
var thisHandlePerson = new Object();
thisHandlePerson.value = data.staffId;
thisHandlePerson.label = data.staffName;
var index = getIndexOfHandlePerson(thisHandlePerson, handlePersonArrTF);
if (index !== -1) {
$(row).addClass('info');
}
}
});
//设定表格行的单击事件,并将选定的记录保存在tokenfield中,这样即使翻转页面,记录仍然在
//如果单击时候,当前行已经含有class类info的信息,则表示移除当前行,并将当前行的内容从handlePersonArrTF的tokenfield中移除。反之添加
$('#handlePersonDT tbody').on('click', 'tr', function () {
var $this = $(this);
var thisData = table.row($this).data();
if ($this.hasClass('info')) {
$this.removeClass('info');
var handlePersonArrTF = $('#handlePersonArrTF').tokenfield('getTokens');
var thisHandlePerson = new Object();
thisHandlePerson.value = thisData.staffId;
thisHandlePerson.label = thisData.staffName;
var index = getIndexOfHandlePerson(thisHandlePerson, handlePersonArrTF);
if (index !== -1) {
handlePersonArrTF.splice(index, 1);
}
$('#handlePersonArrTF').tokenfield('setTokens', handlePersonArrTF);
} else {
$this.addClass('info');
var handlePersonArrTF = new Array();
var handlePersonForTF = new Object();
handlePersonForTF.value = thisData.staffId;
handlePersonForTF.label = thisData.staffName;
handlePersonArrTF.push(handlePersonForTF);
$('#handlePersonArrTF').tokenfield('createToken', handlePersonForTF);
}
});
loadHandlePersonArrTF();
}
function getIndexOfHandlePerson (object, array) {
for (var i = 0; i < array.length; i ++) {
if (array[i].value == object.value) {
return i;
}
}
return -1;
}
function loadHandlePersonArrTF () {
$('#handlePersonArrTF').tokenfield()
.on('tokenfield:removedtoken', function (e) {
var $table = $("#handlePersonDT").DataTable();
$('#handlePersonDT tbody tr').each(function () {
var $this = $(this);
var thisData = $table.row($this).data();
if (thisData.staffId == e.attrs.value) {
$this.removeClass('info');
}
});
})
.on('tokenfield:edittoken', function (e) {
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
})
}
function clearHandlePerson(){
$('#handlePersonArrTF').tokenfield('setTokens', '');
$('#handlePersonDT tbody tr').removeClass('info');
}