基本在公司使用的datagrid不需要自己寫前臺代碼，只需要自己給grid明確id，url以及列屬性即可。
后臺需要返回一個數據類型：{recordsFiltered=2, data=[], draw=null, recordsTotal=2}，通常返回這個數據類型的話，只需要調用datatable.js的ajaxTableQuery方法即可。由于業務需要，無法使用ajaxTableQuery，于是我自己返回了Map<String, Object>類型，result.put("draw", null);result.put("recordsTotal", 2);result.put("recordsFiltered", 2);result.put("data", list);由于很少接觸并了解datagrid前臺代碼，故出現問題除了百度沒有其他更好的方法，所以記錄下來datagrid的前臺代碼，了解其主要屬性后才將問題解決掉。
???????
來源：http://www.jb51.net/article/84751.htm
<body><div class="row-fluid">?<h3>JQuery DataTables插件自定義分頁Ajax實現</h3>?<table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">?<thead>?<tr>?<th>編號</th>?<th>姓名</th>?<th>性別</th>?</tr>?</thead>?</table></div><script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script><script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script><script type="text/javascript">?$(function () {?//提示信息?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": "跳轉"?},?"oAria": {?"sSortAscending": ": 以升序排列此列",?"sSortDescending": ": 以降序排列此列"?}?};?//初始化表格?var table = $("#example").dataTable({?language:lang, //提示信息?autoWidth: false, //禁用自動調整列寬?stripeClasses: ["odd", "even"], //為奇偶行加上樣式，兼容不支持CSS偽類的場合?processing: true, //隱藏加載提示,自行處理?serverSide: true, //啟用服務器端分頁?searching: false, //禁用原生搜索?orderMulti: false, //啟用多列排序?order: [], //取消默認排序查詢,否則復選框一列會出現小箭頭?renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui?pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers?columnDefs: [{?"targets": 'nosort', //列的樣式名?"orderable": false //包含上樣式名‘nosort'的禁止排序?}],?ajax: function (data, callback, settings) {?//封裝請求參數?var param = {};?param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候?param.start = data.start;//開始的記錄序號?param.page = (data.start / data.length)+1;//當前頁碼?//console.log(param);?//ajax請求數據?$.ajax({??type: "GET",??url: "/hello/list",??cache: false, //禁用緩存??data: param, //傳入組裝的參數??dataType: "json",??success: function (result) {??//console.log(result);??//setTimeout僅為測試延遲效果??setTimeout(function () {??//封裝返回數據??var returnData = {};??returnData.draw = data.draw;//這里直接自行返回了draw計數器,應該由后臺返回??returnData.recordsTotal = result.total;//返回數據全部記錄??returnData.recordsFiltered = result.total;//后臺不實現過濾功能，每次查詢均視作全部結果??returnData.data = result.data;//返回的數據列表??//console.log(returnData);??//調用DataTables提供的callback方法，代表數據已封裝完成并傳回DataTables進行渲染??//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢??callback(returnData);??}, 200);??}?});?},?//列表表頭字段?columns: [?{ "data": "Id" },?{ "data": "Name" },?{ "data": "Sex" }?]?}).api();?//此處需調用api()方法,否則返回的是JQuery對象而不是DataTables的API對象?});</script></body>
