DataTable相关操作（js，发送请求&相关参数，获取查询数据总条数）

DataTable 相关js

function AjaxList(selector) {
this.selector = selector;
this.targetUrl = null;
this.formId=“form”;
this.columns = {};
this.rowCallback = {};
this.datatable = {};
this.method=“POST”;

// 初始化全选按钮 页面中所有名字为checkCode 的复选框全部控制
$("#checkAll").click(function() {
	var checkFlag = this.checked;
	$("[name = 'checkCode']:checkbox").each(function() {
		this.checked = checkFlag;
	});

});

\
// ajaxtable 的初始化
$.extend($.fn.dataTable.defaults, {
“bAutoWidth”: false, //自适应宽度 NatureLee
“paging”: true,
“lengthChange”: true,
“searching”: false,
“ordering”: true,
“info”: true,
“processing” : true,
“serverSide” : true,
// “searching” : false, // 搜索
// “autoWidth” : false,
// “scrollX”: true,
// // “dom” : ‘<"top"lp>rt<"bottom"pi><“clear”>’,
// // dom: ‘T<“clear”>lfrt<"bottom"pi><“clear”>’,
// //dom : ‘<"top"plT>rt<"bottom"pi><“clear”>’,
// //dom : ‘<Tr>t<pli>’,
// “dom”: ‘<“top”>rt<"bottom"filp><“clear”>’,
“iCookieDuration”: 300, // cookie保留5分钟
“stateSave”: true, //记录查询时的情况
“destroy”: false,
// “pagingType” : “full_numbers”,
“language” : {
“lengthMenu” : “每页显示 MENU 条记录”,
“sEmptyTable” : “无数据”,
“info” : “当前第 PAGE 页 （共 PAGES 页 MAX 条记录）”,
“infoEmpty” : “”,
“infoFiltered” : “(filtered from MAX total records)”,
“processing” : “数据加载中…”,
“decimal” : “,”,
“thousands” : “”,
“paginate” : {
“first” : “<span class=‘glyphicon glyphicon-step-backward’></span>”,
“previous” : “<span class=‘glyphicon glyphicon-backward’></span>”,
“next” : “<span class=‘glyphicon glyphicon-forward’></span>”,
“last” : “<span class=‘glyphicon glyphicon-step-forward’></span>”
}
},
“lengthMenu”: [[10, 25, 50], [10, 25, 50]],
“displayLength”:50,
“destroy” : true
});

}
/**

• 点击查询事件 点击的绑定 OK
• /
  AjaxList.prototype.query = function() {
  var innerDataTable = $(this.selector);
  var innerTargetUrl = this.targetUrl;
  var innerFormId = this.formId;
  var innerColumns = this.columns;
  var innerRowCallback = this.rowCallback;
  var method = this.method;
  if(this.database==null){
  this.datatable = innerDataTable.dataTable({
  “ajax” : {
  url : innerTargetUrl,
  error : handleAjaxError,
  data: $("#"+innerFormId).serializeJson(),
  “method” : method
  },
  “columns” : innerColumns,
  “rowCallback” : innerRowCallback
  });
  }else{
  this.datatable.ajax.reload();
  }
  };
  /*
• 复选框选中值
• */
  function getSelectedIds() {
  var selectIds = “”;
  $(“input[name=‘checkCode’]:checked”).each(function() {
  selectIds = selectIds + $(this).val() + “,”;
  });
  if (selectIds != “”) {
  selectIds = selectIds.substr(0, selectIds.length - 1);
  }
  return selectIds;
  };

/**

• 公用反选全选可用
• */
  function reCheckAll(){
  // 反选
  var boolean = true;
  $("[name = ‘checkCode’]:checkbox").each(function() {
  if($(this).is(’:checked’)){
  } else {
  boolean = false;
  }
  $("#checkAll").prop(“checked”, boolean);
  });
  }

发送请求到后端

var ajaxList = new AjaxList("#relationResultDataTable");
ajaxList.targetUrl = contextPath + ‘/xxx/xxx’;
ajaxList.columns = columns;
ajaxList.rowCallback = rowCallback;
ajaxList.query();

请求相关参数制作

1.columns

var columns = [
{
“data”: null,
“searchable”: false,
“orderable”: false,
“targets”: 0
}, {
“data”: “registno”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return data;
}
}
}, {
“data”: “insuredname”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return data;
}
}
}, {
“data”: “payeename”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return data;
}
}
}, {
“data”: “reportorphone”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return data;
}
}
}, {
“data”: “sumpaid”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return data;
}
}
}, {
“data”: “damagedate”,
“render”: function (data) {
if (data == “” || data == null) {
return “无”;
} else {
return formatDate(new Date(data));
}
}
}
];

2.rowCallback

function rowCallbackRelationCase(row, data, displayIndex, displayIndexFull) {
$("[name = ‘checkAllCase’]:checkbox").each(function () {
$(this).prop(“checked”, false);
});
$(‘td:eq(0)’, row).html("<input name=‘checkCodeCase’ οnclick=‘reCheckAllCase()’ type=‘checkbox’ value=’" + data.registno + "’>  " + (displayIndex + 1) + “”);
};

获取查询table的总条数

var table1 = $(’#itemTable’).DataTable();
var info = table1.page.info();
var rows= info.recordsDisplay;