關於datagrid

　　基本在公司使用的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 >