<table id="table_id_example" class="display">
 <thead>
  <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>
  </tr>
  <tr>

var data = [
 [
  "Tiger Nixon",
  "System Architect",
  "Edinburgh",
  "5421",
  "2011/04/25",
  "$3,120"
 ],
 [
  "Garrett Winters",
  "Director",
  "Edinburgh",
  "8422",
  "2011/07/25",
  "$5,300"
 ]
 ];
 
 $('#example').DataTable( {
 data: data
 } );

 function Employee ( name, position, salary, office ) {
 this.name = name;
 this.position = position;
 this.salary = salary;
 this._office = office;
 
 this.office = function () {
  return this._office;
 }
 };
 
 $('#example').DataTable( {
 data: [
  new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
  new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
 ],
 columns: [
  { data: 'name' },
  { data: 'salary' },
  { data: 'office()' },
  { data: 'position' }
 ]
 } );

var data = [
 {
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$3,120",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
 },
 {
  "name": "Garrett Winters",
  "position": "Director",
  "salary": "$5,300",
  "start_date": "2011/07/25",
  "office": "Edinburgh",
  "extn": "8422"
 }
 ];
 //object可以如下初始化表格
 $('#example').DataTable( {
 data: data,
 //使用對(duì)象數(shù)組，一定要配置columns，告訴 DataTables 每列對(duì)應(yīng)的屬性
 //data 這里是固定不變的，name，position，salary，office 為你數(shù)據(jù)里對(duì)應(yīng)的屬性
 columns: [
  { data: 'name' },
  { data: 'position' },
  { data: 'salary' },
  { data: 'office' }
 ]
 } );

$('#example').DataTable( {
 paging: false
} );

$('#example').DataTable( {
 scrollY: 400
} );

$('#example').DataTable( {
 paging: false,
 scrollY: 400
} );

$('#a).DataTable( {
 searching: true,
 ordering: true
} );

$('#b).DataTable( {
 searching: true,
 ordering: true
} );

function getCommonOptions()
{
 var options = new Object();
 options.searching = true;
 options.ordering = true;
 return options;
}


var aOptions = getCommonOptions();
aOptions.scrollY = true;
$('#a).DataTable(aOptions);

var bOptions = getCommonOptions();
bOptions .scrollY = false;
$('#b).DataTable(bOptions);

/**通用列表**/
function createCommonTableOptions() {
 var oTemp = new Object;
 // 是否允許檢索
 oTemp.searching = true;
 // 是否允許排序
 oTemp.ordering = true;
 // 默認(rèn)排序
 oTemp.order = [[1,'desc']];
 // 是否顯示情報(bào) 就是"當(dāng)前顯示1/100記錄"這個(gè)信息
 oTemp.info = true;
 // 是否允許翻頁，設(shè)成false，翻頁按鈕不顯示
 oTemp.paging = true;
 // 水平滾動(dòng)條
 oTemp.scrollX = false;
 // 垂直滾動(dòng)條
 oTemp.scrollY = true;
 // 是否可以選擇每頁展示的Item數(shù)量
 oTemp.lengthChange = true;
 // 選擇每頁展示數(shù)量的選項(xiàng)
 oTemp.lengthMenu = [10, 25, 50, 75, 100];
 // 每頁展示數(shù)據(jù)條數(shù)默認(rèn)值
 oTemp.pageLength = 10;
 //翻頁按鈕樣式
 // numbers:數(shù)字
 // simple:前一頁，后一頁
 // simple_numbers:前一頁，后一頁，數(shù)字
 // full:第一頁，前一頁，后一頁，最后頁
 //full_numbers:第一頁，前一頁，后一頁，最后頁，數(shù)字
 //first_last_numbers:第一頁，最后頁，數(shù)字
 oTemp.pagingType = "simple_numbers";
 // 行樣式應(yīng)用 指定多個(gè)的話，第一行tr的class為strip1，第二行為strip2，第三行為strip3.
 // 第四行以后又開始從strip1循環(huán)。。。 如果想指定成斑馬條狀，這里的class必須指定為2個(gè)。
 oTemp.stripeClasses = ['line_1', 'line_2'];
 // 自動(dòng)列寬
 oTemp.autoWidth = true;
 // 是否表示 "processing" 加載中的信息，這個(gè)信息可以修改
 oTemp.processing = true;
 // 每次創(chuàng)建是否銷毀以前的DataTable,默認(rèn)false
 oTemp.destroy = false;
 // 控制表格各種信息的表示位置（比較復(fù)雜） 默認(rèn):lfrtip
 // 具體參考：https://datatables.net/reference/option/dom
 oTemp.dom = "lrtip";
 // language 用來定義展示信息的內(nèi)容，如加載中顯示的提示、當(dāng)前頁顯示多少條時(shí)的提示、翻頁按鈕上的文字等等
 oTemp.language = {
 "processing": "翻頁中。。。。",
 // 當(dāng)前頁顯示多少條
 "lengthMenu": "當(dāng)前顯示 _MENU_ 條記錄",
 // _START_（當(dāng)前頁的第一條的序號(hào)） ,_END_（當(dāng)前頁的最后一條的序號(hào)）,_TOTAL_（篩選后的總件數(shù)）,
 // _MAX_(總件數(shù)),_PAGE_(當(dāng)前頁號(hào)),_PAGES_（總頁數(shù)）
 "info": "當(dāng)前第 _PAGE_ 頁, 共 _PAGES_ 頁, 共 _MAX_ 條數(shù)據(jù)",
 "infoEmpty": "0條數(shù)據(jù)",
 "infoFiltered": "",
 // 沒有數(shù)據(jù)的顯示（可選），如果沒指定，會(huì)用zeroRecords的內(nèi)容
 "emptyTable": "沒有記錄",
 // 篩選后，沒有數(shù)據(jù)的表示信息，注意emptyTable優(yōu)先級(jí)更高
 "zeroRecords": "沒有符合條件的記錄",
 // 千分位的符號(hào)，只對(duì)顯示有效，默認(rèn)就是"," 一般不要改寫
 //"thousands": "'",
 // 小數(shù)點(diǎn)位的符號(hào)，對(duì)輸入解析有影響，默認(rèn)就是"." 一般不要改寫
 //"decimal": "-",
 // 翻頁按鈕文字控制
 "paginate": {
  "first": "第一頁",
  "last": "最后一頁",
  "next": "上一頁",
  "previous": "下一頁"
 },
 "loadingRecords": "正在加載中，請(qǐng)稍后。。。"
 };
 // 默認(rèn)是false
 // 如果設(shè)為true，將只渲染當(dāng)前也的html，速度會(huì)很快，但是通過API就訪問不到所有頁的數(shù)據(jù)，有利有弊
 //"deferRender": false,
 // 服務(wù)器端處理方式
 oTemp.serverSide = true;
 return oTemp;
}

package com.springapp.mvc.params;

/**
 * Created by qinyy on 2018/8/14.
 */
public class OperationQueryParam
{
 private int draw;
 // 分頁查詢起始下標(biāo)
 private int start;
 // 分頁查詢偏移量--- 既每頁展示的數(shù)據(jù)數(shù)量
 private int offset;
 // 排序?qū)傩?
 private String sortPro;
 // 排序方式 0 asc 1 desc
 private int sortType;

 public String getSortPro()
 {
 return sortPro;
 }

 public void setSortPro(String sortPro)
 {
 this.sortPro = sortPro;
 }

 public int getSortType()
 {
 return sortType;
 }

 public void setSortType(int sortType)
 {
 this.sortType = sortType;
 }

 public int getStart()
 {
 return start;
 }

 public void setStart(int start)
 {
 this.start = start;
 }

 public int getOffset()
 {
 return offset;
 }

 public void setOffset(int offset)
 {
 this.offset = offset;
 }

 public int getDraw() {
 return draw;
 }

 public void setDraw(int draw) {
 this.draw = draw;
 }
}

public class CommonDatatableBean
{
 private int draw;
 private int recordsTotal;
 private int recordsFiltered;
 private List<Object> data;

 public int getDraw()
 {
 return draw;
 }

 public void setDraw(int draw)
 {
 this.draw = draw;
 }

 public int getRecordsTotal()
 {
 return recordsTotal;
 }

 public void setRecordsTotal(int recordsTotal)
 {
 this.recordsTotal = recordsTotal;
 }

 public int getRecordsFiltered()
 {
 return recordsFiltered;
 }

 public void setRecordsFiltered(int recordsFiltered)
 {
 this.recordsFiltered = recordsFiltered;
 }

 public List<Object> getData()
 {
 return data;
 }

 public void setData(List<Object> data)
 {
 this.data = data;
 }
}

var operationTableOption = createCommonTableOptions();
 operationTableOption.ajax = {
 // url可以直接指定遠(yuǎn)程的json文件，或是MVC的請(qǐng)求地址 /Controller/Action
 url: "/operation/query",
 type: 'POST',
 // 異步調(diào)用
 async:true,
 // 傳給服務(wù)器的數(shù)據(jù)，可以添加我們自己的查詢參數(shù)
 data: function (param)
 {
  param.start = param.start;
  param.offset = param.length;
  switch (param.order[0].column)
  {
  case 1:
   param.sortPro = "createtime";
   break;
  case 2:
   param.sortPro = "excutetime";
   break;
  }

  if("asc" == param.order[0].dir)
  {
  param.sortType = 0;
  }
  else if("desc" == param.order[0].dir)
  {
  param.sortType = 1;
  }
  return param;
 },
 //用于處理服務(wù)器端返回的數(shù)據(jù)。 dataSrc是DataTable特有的
 dataFilter: function (myJson)
 {
  var result = JSON.parse(myJson);
  var retStr = JSON.stringify(result.data);
  return retStr;
 }
 };

operationTableOption.columns = [
 { "data": "operationid","orderable": false },
 { "data": "createtime" ,
  "orderable": true,
  "render": function ( data, type, row, meta )
  {
  if(data > 0)
   return $.myTime.UnixToDate(data,true)
  else
   return ""
  }
 },
 { "data": "excutetime" ,
  "orderable": true,
  "render": function ( data, type, row, meta )
  {
  if(data > 0)
   return $.myTime.UnixToDate(data,true)
  else
   return ""
  }},
 { "data": "needuploadlocation","orderable": false,
  "render": function ( data, type, row, meta )
  {
  if(data)
  {
   return "是";
  }
  else
  {
   return "否";
  }
  }
 },
 { "data": "recordsbegindate","orderable": false },
 { "data": "recordsenddate" ,"orderable": false},
 { "data": "uploadsoundsids","orderable": false },
 {"render":function ( data, type, row, meta )
 {

  var operationId = row.operationid;
  return "<button type=\"button\"οnclick=\"deleteOperation("+ operationId +"," +meta.row+ ")\">刪除</button>";
 }}
 ];

@ResponseBody
 @RequestMapping(method = RequestMethod.POST,value = "query")
 public BaseResult queryOperation(OperationQueryParam param)
 {
 if(param == null)
  return null;
 BaseResult result = new BaseResult();
 CommonDatatableBean tableBean = new CommonDatatableBean();
 tableBean.setDraw(param.getDraw());
 int totalAmount = mOperationService.getOperationCount();
 tableBean.setRecordsTotal(totalAmount);
 tableBean.setRecordsFiltered(totalAmount);
 int limit = param.getStart();
 List<Object> list = new ArrayList<Object>();
 String sortType = param.getSortType() == 0?"ASC":"DESC";
 List<Operation> operations = mOperationService.queryOperationPaged(limit,param.getOffset(),param.getSortPro(),sortType);
 if(operations != null && operations.size() > 0)
 {
  for(Operation operation:operations)
  {
  list.add(operation);
  }
 }
 tableBean.setData(list);
 result.setData(tableBean);
 result.setResult(ResultCode.SUCCESS);
 return result;
 }