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组件的方式：

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