jquery-datatable实现表格加载，分页和删除功能

近期更换技术，采用bootstrap的布局方式来进行项目编写，由于bootstrap为前端布局框架，好多功能实现需要借助插件完成，比如表格的实现。

由于第一次接触datatable插件，找了好长时间的资料才找齐一套不太完整的方案（至少能进行项目），贴出代码，自己巩固一下知识，也给遇到相同问题的朋友一个解决思路。

引用data-table的css和js。

<link href="<%=request.getContextPath()%>/vendors/dataTables/css/dataTables.bootstrap.min.css" rel="stylesheet">

<script src="<%=request.getContextPath()%>/vendors/dataTables/js/jquery.dataTables.min.js"></script>
<script src="<%=request.getContextPath()%>/vendors/dataTables/js/dataTables.bootstrap.min.js"></script>

我这边采用了bootscript风格的分页样式，所以会有 dataTables.bootstrap.min.css 和 dataTables.bootstrap.min.js。

分页代码：

var lang = {
        "sProcessing": "处理中...",
        "sLengthMenu": "每页 _MENU_ 条",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "当前显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条。",
        "sInfoEmpty": "当前显示第 0 至 0 条，共 0 条",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "本地搜索：",
        "sUrl": "",
        "sEmptyTable": "暂无数据",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页",
            "sJump": "跳转"
        }
    };
 // 网上抄的显示信息。
   $('#id').dataTable({
       "language": lang, //提示信息
        "autoWidth": false, //自适应宽度，
        "searching": false, //是否允许Datatables开启本地搜索
        "paging": true, //是否开启本地分页
        "lengthChange": false, //是否允许产品改变表格每页显示的记录数
        "info": true, //控制是否显示表格左下角的信息
        //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
        "scrollX": true,
        "ordering": false,
        "iDisplayLength": 20,
        "serverSide": false,
        // 重点是进行ajax请求和数据加载。
        “ajax”:{
            "url": that._servlets.search,
            "type": 'POST',
            "dataType": 'json',
            "data": function () {
             // data为参数传递，其他传递方式我没有尝试。
               return JSON.stringify(dataJson);
            }
        },
        "columns":[
            {"data": "id", "className": "hide"},
            {"data": "sequenceNum"},
            {"data": "name"},
            {
            // 这里是编辑和删除两个按钮的书写方式。
            "data": function (obj) {
                return '<a href="edit.jsp?id=' + obj.id + '">编辑</a> <button id="btnDelete" class="btn-link" data-toggle="modal" data-target="#delete">删除</button>'
            }
        }
        ]
   });

上面这样就可以实现ajax请求数据并且加载到表格了，但是有个问题就是json数据必须带有一个标识才能正常的在columns里面调用数据，这里我没有找到合适的办法。

json的格式需要有一个“data”的东西才行，这个和columns里面的data是对应的。

下面是删除功能的实现

var id = '';
var tables = $('#dvgDiseaseCategory').DataTable();
    $('#dvgDiseaseCategory tbody').on('click', 'button#btnDelete', function () {
        var data = tables.row($(this).parents('tr')).data();
        id = data.id;
    });
// 大概意思就是获取到点击删除按钮的这一行，然后根据行来找到其中的数据组，然后再提取对应的数据。我这边是把id提取出来，再外部进行的删除方法。
// 删除方法的实现就是点击删除按钮时，弹出一个bootstrap的模态框，再点击模态框的确定按钮时，执行一次删除的ajax请求，然后再进行一次加载查询的函数更新表格。

在这里会出现一个问题，再次加载查询函数调用datatable时，会弹出一个好多东西的弹出框，我查资料以后，认为时再次调用时上一次的datatable组件还在。虽然不知道理解的对不对，但是解决方案就是在其他地方再次调用datatable时，必须先将上一次的datatable组件销毁，这样就能顺利调用了。

销毁datatable组件的方式：

扫描二维码关注公众号，回复： 2211157 查看本文章

var table = $('#id').dataTable();
//如果datatable存在，将其销毁。
if(table){
    table.fnDestroy();
}
//销毁之后在调用。
search();

jquery-datatable实现表格加载，分页和删除功能

猜你喜欢