DataTable的Ajax使用

DataTable

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官网: https://datatables.net/

中文网: http://www.datatables.club/

用法：

先从最简单的开始：导入导入dataTable需要的js与css

- css http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
- js  http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Js : 初始化表格

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt","columns": [
            { "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }
        ]
    } );
} );

这是使用Ajax的例子，知道的朋友都知道现在都是使用前后端分离+Ajax返回Json数据来进行数据的传递的。dataTable支持 Ajax + Josn 的形式返回数据并解析渲染。

json : 数据格式

{ "name": "Tiger Nixon","position": "System Architect","salary": "$3,120","start_date": "2011/04/25","office": "Edinburgh","extn": "5421" }

json就不多说了，另外推荐一个格式化json的网站，蛮好用的 https://www.bejson.com/

完整案例：

<table id="table" class="table table-bordered table-hover">
    <thead>
        <th width="10%">成交编号</th>
        <th width="5%">签约人</th>
        <th width="5%">买方</th>
        <th width="5%">卖方</th>
        <th width="10%">房源信息</th>
        <th width="10%">总价(元)</th>
        <th width="5%">成交时间</th>
        <th width="6%">状态</th>
        <th width="15%">操作</th>
    </thead>
    <tbody> <!--tbody中的内容dataTable会自动填充-->
    </tbody>
</table>
- 这里table的Id是初始化要用到的

js代码：

var table = $("#table"); //定义表格接下来好初始化 
 table.dataTable({       //表格渲染开头时可以设置一些配置参数（如果你刚开始接触也可以啥都不配）
     "bSort" : false,// 
     processing : true,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
     serverSide : true,//是否开启服务器模式
     searching : false,//是否允许Datatables开启本地搜索
     autoWidth : true,//自适应宽度
     language : {
           url : '/js/plugins/dataTables/language/Chinese.json' //DataTables语言配置选项
     },ajax : {
         url : "/deal/getxxxList",//访问路径，返回Json数据
         data : function(d) { //传递参数 
           rowCode1 = 0;
           planify(d);
           d.timeStart = $("#timeStart").val();
           d.timeEnd = $("#timeEnd").val();
           d.departmentId = $(
             "#selectDepartment option:selected").val();
           d.price = $("#selectPrice option:selected").val();
           d.keywords = $("#keywords").val();
           d.dealStatus = $(
             "#selectDealStatus option:selected").val();
           d.paidStatus = $(
             "#selectPaidStatus option:selected").val();
           d.alreadySplit = $(
             "#selectAlreadySplit option:selected")
             .val();
         },type : "POST"   //设置请求类型
       },columnDefs : [ {  //设置列定义初始化属性
         "defaultContent" : "",//为列设置默认的静态内容
         "targets" : "_all"  //指定所有列
       } ],columns : [ //数据渲染，固定格式,下面每一个对应表格一个td
         {
           "name" : "dealCode",//后台返回json数据 这是名
           "data" : "dealCode"  //这是值，一定要对应
         },{
           "name" : "dealUserName","data" : "dealUserName"
         },{
           "name" : "custName","data" : "custName"
         },{
           "name" : "ownerName","data" : "ownerName"
         },{
           "name" : "houseSource","data" : function(row) { //这是第二种写法，运用场景是你要做判断写js的时候可以这样写
             //这个"row"就是数据源，可以通过 row.xx来获取json返回的数据，名字要对上
             var projectStr = "";

             if (typeof (row.projectName) == "undefined" && row.houseSourceProject == undefined)              {
               return "";
             }
             var buildArea = "";
             if (parseInt(row.buildArea) > 0) {
               buildArea = row.buildArea;
             }
             //优先取楼盘名称
             if(row.houseSourceProject != undefined && row.houseSourceProject != ""){
               projectStr = row.houseSourceProject;
             }else if(row.projectName != undefined && row.projectName != ""){
               projectStr = row.projectName;
             }else{
               projectStr = "";
             }
             return projectStr + " " + buildArea + "㎡"; // 返回的值就是表格td的值
           }
         },{
           "name" : "dealPrice","data" : "dealPrice"
         },{
           "name" : "dealTimeStr","data" : "dealTimeStr"
         },{
           "name" : "dealStatus","data" : function(row) {
             var status = row.dealStatus;
             var split = row.alreadySplit;
             var paid = row.paidStatus;
             var s1 = "";
             var s2 = "";
             var s3 = "";
             if (status == 0) {
               s1 = "未审核<br>";
             } else if (status == 1) {
               s1 = "已审核<br>";
             } else if (status == 2) {
               s1 = "已作废<br>";
             } else {
               s1 = "<br>";
             }
             if (split == 0) {
               s2 = "未分配<br>";
             } else if (split == 1) {
               s2 = "已分配<br>";
             } else {
               s2 = "<br>"
             }
             if (paid == 1) {
               s3 = "已回款";
             } else if (paid == 0) {
               s3 = "未回款";
             } else if (paid == 2) {
               s3 = "部分回款";
             }
             return s1 + s2 + s3;
           }
         },{
           "name" : "doElse","data" : function(row) {
             var html = "<table><tr>";

             if (row.dealStatus == 0) {
               html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",1,"" + row.dealCode +"")' dealId='"+row.dealId+"'><span>查看</span></a></td>";
             } else if (row.dealStatus == 1) {
               html += "<td><a class='get_detail btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+",2,"" + row.dealCode +"")'><span>查看</span></a></td>";
               if (row.paidStatus != 1) {
                 html += "<td><a data-toggle='modal' onclick='toGetPaid("
                   + row.dealId
                   + ")' data-target='#myModal3' class='btn-xs btn btn-outline btn-light'>收款</a></td>";
               }
               html += "<td><a class='get_detail btn-xs btn btn-outline btn-light'  onclick='preview("+row.dealId+","" + row.dealCode +"")'>业绩确认单</a></td>";
             } else {
               html += "<td><a class='get_detail  btn-xs btn btn-outline btn-light' data-toggle='modal' data-target='#dealDetail' onclick='openOldDetail("+row.dealId+","" + row.dealCode +"")' dealId='"+row.dealId+"'><span>查看</span></a></td>";
             }
             html += "<td><a onclick='deleteDealDetail("
               + row.dealId
               + ")' class='btn-xs btn btn-outline btn-light'>删除</a></td>";
             html += "</tr></table>";
             return html;
           }
         } ]
     });

注意的几个点：我刚开始做的时候也是一脸懵b的。

• 不止我这一种写法，有很多种写法，我这种的应用场景适用于 Ajax + json 数据来做。（我也只会这一种，我一个写后台的我容易吗）
• 参数配置丰富到你想吐，文档都在官网中有，我还是写出来吧：http://www.datatables.club/reference/option/
• 数据一定要对上，少一个都不行，你表格中写了多少个th，你在columns中就要写多少个。

其实非常的简单，只要你的数据个数能够对的上并且后台数据是标准json格式，你没有打错的话，都是没毛病的。

顺便讲讲dataTable的分页:

@RequestMapping(value = "getXXXList",produces = "text/html;charset=UTF-8")
@ResponseBody
public String getOldHouseList(HttpServletRequest request,DataTableFormVo vo) {
        //注意这个 DataTableFormVo 参数这个参数是用来接收dataTable传递过来的一个vo对象，其中就包括分页必须的两个参数，第几条到第几条，再利用mysql的limit进行分页就很简单了
        
        //业务代码就不写了
        return resultVo.toString();
    }

到这里就发现，dataTable不是自带分页吗，怎么还要用limit了

这么说你就明白了，dataTable自带的分页不是物理分页，如果我有一千万条数据不就嗝屁了，所以我们还是乖乖的用物理分页吧。

刚刚开始写博客，可能写的很粗糙，感谢你能看到这里。