第一次用到了DataTable

最新推荐文章于 2021-08-26 11:26:09 发布

原创最新推荐文章于 2021-08-26 11:26:09 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何结合使用jQuery DataTables和bootstrap-tokenfield插件，实现数据表格中记录的选择与保存功能。通过具体示例代码展示了如何配置DataTables及响应行点击事件，确保即使翻页也能保留用户选择的状态。

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');
}