jQueryTable DataTables

DataTables的表格是由js在浏览器生成的，当表格数据从浏览器本地获取或者从服务器接口中（ajax请求）获取时，一般可以考虑使用DataTables

1 我的业务场景是DataTables表格数据异步从后台获取，小太爷是写java出生的，先写后台部分，后台用的spring mvc哈

@Controller
@RequestMapping(value = "/approve")
public class ApproveController { 

  @Autowired
  private ApproveContractService approveContractService;

  @ResponseBody
  @RequestMapping(value="/contract/list")
  public ResponseEntity contractListRestful(@RequestParam(value = "param") String param,
                                                                              @RequestParam(value = "pageIndex") Integer pageIndex,
                                                                              @RequestParam(value = "pageSize") Integer pageSize){


    try{
    // 我使用的是pageHelper的插件，datatables应该向后台传入pageIndex和pageSize
    PageInfo pageInfo = approveContractService.findApproveContract(pageIndex,pageSize,param);


    JSONObject jsonObj = new JSONObject();
    jsonObj.put("data",pageInfo.getList());// 查询到的列表数据返回给datatables
    jsonObj.put("total",pageInfo.getTotal());// 总条数目返回给datatables


    return new ResponseEntity(jsonObj, HttpStatus.OK);
    }catch (Exception e){
      e.printStackTrace();
      return new ResponseEntity(HttpStatus.BAD_REQUEST);
   }
  }
}

2 在页面上加入datatables的js引用，而css样式用的bootstrap，只需将bootstrap样式加入即可

<script type="text/javascript"
        src="${ctx}/static/ace/assets/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
        src="${ctx}/static/ace/assets/js/jquery.dataTables.bootstrap.js"></script>

3 创建表格dom（<table> <tbody> 自己加，表头和行列由datatables生成）

<table id="contract-table" style="width: 100%;" class="table hidden">

    <tbody>

    </tbody>
</table>

注意在刚开始的时候，由于没有数据，这个table要hidden掉

4 datatables的初始化

var table;// jQueryTable
var contractTable = $('#contract-table');


function initDataTables() {
        if(!table){
            table = contractTable.DataTable({
                serverSide: true,// 服务器模式
                ajax: function (data, callback, settings) {
                    ajaxForData(data, callback); // 请求数据 看下面方法
                },
                columns: [
                    {title: ""},
                    {title: "摘要"},
                ],
                ordering: false,       //不排序
                lengthChange: false,  //是否允许用户自定义显示数量
                bPaginate: true, //翻页功能
                searching: false,//本地搜索
                Info: true,//页脚信息
                oLanguage: {//国际语言转化
                    oAria: {
                        sSortAscending: " - click/return to sort ascending",
                        sSortDescending: " - click/return to sort descending"
                    },
                    sLengthMenu: "显示 _MENU_ 记录",
                    sZeroRecords: "对不起，查询不到任何相关数据",
                    sEmptyTable: "未有相关数据",
                    sLoadingRecords: "正在加载数据-请等待...",
                    sInfo: "当前显示 _START_ 到 _END_ 条",
                    sInfoEmpty: "当前显示0到0条，共0条记录",
                    sInfoFiltered: "（数据库中共为 _MAX_ 条记录）",
                    sSearch: "",
                    sUrl: "",
                    oPaginate: {
                        sFirst: "首页",
                        sPrevious: " 上一页 ",
                        sNext: " 下一页 ",
                        sLast: " 尾页 "
                    }
                },
            });
        }
    }

function ajaxForData (data, callback) {
       
        var pageIndex = (data.start / data.length) + 1;        
var pageSize = data.length;              
        var param = $('#contractSummaryInput').val(); // 搜索条件
        $.ajax({
            type: 'post',
            url: '${ctx}/approve/contract/list',
            data: {
                'pageIndex':pageIndex,
'pageSize':pageSize,
'param':param
            },
            success: function (result) {

contractTable.removeClass('hidden');// 显示表格
                var returnData = {};
                var list = [];
                returnData.draw = data.draw;
                returnData.recordsTotal = result.total;
                returnData.recordsFiltered = result.total;
                for(var i = 0; i < result.data.length; i++){
   // list数组的一个元素（也是个数组），就是动态填到table中一行数据
                    list[i] = ["<input type='checkbox' data-approveNum="+ result.data[i].approveNum + " />", result.data[i].contractAbstract];
                }
                returnData.data = list;
                callback(returnData);// 又callbak回调函数自动调用数据渲染表格
            },
        });
    }

5 样式：表格的第一列为checkbox样式，不宜太宽，可以把表格第一列宽度写死

<style>
  #contract-table tr th:nth-child(1){
    width: 5px !important;
  }
</style>

6 注意由于DataTables是后来才生成的，所以监听datatables的checkbox需要用下面的监听方法

$(document).on('click', "#contract-table input[type='checkbox']", function () {


// 监听checkbox的业务代码


});

// 下面这个监听是不起效的

$(''#contract-table input[type='checkbox']").on('onclick', function(){});