Jquery Datatables的使用详解

<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,
 //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
 //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
 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;
 // 默认排序
 oTemp.order = [[1,'desc']];
 // 是否显示情报 就是"当前显示1/100记录"这个信息
 oTemp.info = true;
 // 是否允许翻页，设成false，翻页按钮不显示
 oTemp.paging = true;
 // 水平滚动条
 oTemp.scrollX = false;
 // 垂直滚动条
 oTemp.scrollY = true;
 // 是否可以选择每页展示的Item数量
 oTemp.lengthChange = true;
 // 选择每页展示数量的选项
 oTemp.lengthMenu = [10, 25, 50, 75, 100];
 // 每页展示数据条数默认值
 oTemp.pageLength = 10;
 //翻页按钮样式
 // numbers:数字
 // simple:前一页，后一页
 // simple_numbers:前一页，后一页，数字
 // full:第一页，前一页，后一页，最后页
 //full_numbers:第一页，前一页，后一页，最后页，数字
 //first_last_numbers:第一页，最后页，数字
 oTemp.pagingType = "simple_numbers";
 // 行样式应用 指定多个的话，第一行tr的class为strip1，第二行为strip2，第三行为strip3.
 // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状，这里的class必须指定为2个。
 oTemp.stripeClasses = ['line_1', 'line_2'];
 // 自动列宽
 oTemp.autoWidth = true;
 // 是否表示 "processing" 加载中的信息，这个信息可以修改
 oTemp.processing = true;
 // 每次创建是否销毁以前的DataTable,默认false
 oTemp.destroy = false;
 // 控制表格各种信息的表示位置（比较复杂） 默认:lfrtip
 // 具体参考：https://datatables.net/reference/option/dom
 oTemp.dom = "lrtip";
 // language 用来定义展示信息的内容，如加载中显示的提示、当前页显示多少条时的提示、翻页按钮上的文字等等
 oTemp.language = {
 "processing": "翻页中。。。。",
 // 当前页显示多少条
 "lengthMenu": "当前显示 _MENU_ 条记录",
 // _START_（当前页的第一条的序号） ,_END_（当前页的最后一条的序号）,_TOTAL_（筛选后的总件数）,
 // _MAX_(总件数),_PAGE_(当前页号),_PAGES_（总页数）
 "info": "当前第 _PAGE_ 页, 共 _PAGES_ 页, 共 _MAX_ 条数据",
 "infoEmpty": "0条数据",
 "infoFiltered": "",
 // 没有数据的显示（可选），如果没指定，会用zeroRecords的内容
 "emptyTable": "没有记录",
 // 筛选后，没有数据的表示信息，注意emptyTable优先级更高
 "zeroRecords": "没有符合条件的记录",
 // 千分位的符号，只对显示有效，默认就是"," 一般不要改写
 //"thousands": "'",
 // 小数点位的符号，对输入解析有影响，默认就是"." 一般不要改写
 //"decimal": "-",
 // 翻页按钮文字控制
 "paginate": {
  "first": "第一页",
  "last": "最后一页",
  "next": "上一页",
  "previous": "下一页"
 },
 "loadingRecords": "正在加载中，请稍后。。。"
 };
 // 默认是false
 // 如果设为true，将只渲染当前也的html，速度会很快，但是通过API就访问不到所有页的数据，有利有弊
 //"deferRender": false,
 // 服务器端处理方式
 oTemp.serverSide = true;
 return oTemp;
}

package com.springapp.mvc.params;

/**
 * Created by qinyy on 2018/8/14.
 */
public class OperationQueryParam
{
 private int draw;
 // 分页查询起始下标
 private int start;
 // 分页查询偏移量--- 既每页展示的数据数量
 private int offset;
 // 排序属性
 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可以直接指定远程的json文件，或是MVC的请求地址 /Controller/Action
 url: "/operation/query",
 type: 'POST',
 // 异步调用
 async:true,
 // 传给服务器的数据，可以添加我们自己的查询参数
 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;
 },
 //用于处理服务器端返回的数据。 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;
 }