1.开发环境
1.1 Struts2框架相关jar包
1.2 json-lib-2.2.3-jdk15.jar
1.3 jquery.dataTables.min.js版本为1.10.8和jQuery相关js
2.编写目的
将DataTables插件与Struts2交互变得更简单易用,代码整洁化!
3.核心代码
3.1 前端封装DataTables插件的相关js代码
datatables-pack.js
/**
*处理DataTable的数据
*公共部分
*/
var DataTablePack = function(){
//汉化分页条
var language = {
paginate:{
first:'首页',
last:'末页',
previous:'上一页',
next:'下一页'
},
lengthMenu:'显示 _MENU_ 条',
zeroRecords:'没有检索到有效数据!',
info:'显示 _START_ 到 _END_ 条记录',
infoEmpty:'没有检索到有效数据!',
search:'查找:',
processing:'正在加载数据,请稍候...',
infoFiltered:'共计 _TOTAL_ 条记录'
}
/* 全选以及选中效果功能 */
function checkAll(table){
//全选功能
table.find('.checkall').change(function () {
var allCheck = table.find('tbody input[type=checkbox]');
if(jQuery(this).is(":checked")){
allCheck.each(function(){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked'); //used for the custom checkbox style
});
}else{
allCheck.each(function(){
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked'); //used for the custom checkbox style
});
}
});
//选中效果
table.on('change', 'tbody tr .check', function () {
$(this).parents('tr').toggleClass("active");
if(jQuery(this).is(":checked")){
jQuery(this).attr('checked',true);
jQuery(this).parent().addClass('checked');
}else{
jQuery(this).attr('checked',false);
jQuery(this).parent().removeClass('checked');
}
});
// table.parent().parent().find('.dataTables_length select').addClass("form-control input-xsmall input-inline"); // modify table per page dropdown
}
/** 公开调用方法 **/
var DataTablePublic = {
/* 处理处理静态数据 */
baseTable:function(table){
var oTable = table.dataTable({
'language':language,//汉化工具条
'lengthMenu':[10,20,30,50,100],//显示每页大小的下拉框中的选项
'dom': "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'f><'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
'pagingType':'full_numbers',//分页样式
'columnDefs':[{
'targets':[0,1],
'orderable':false
}],//默认列参数
"order":[
[2, "asc"]
] //默认排序的列
});
checkAll(table);//全选功能
return oTable;
},
/* 即时后台获取数据*/
serverTable:function(table,url,reqData,columns,startNum){
//alert(url);
var oTable = table.dataTable({
'ajax':{
dataType:'json',
/contentType:'application/json',
type:'post',//更改Ajax的请求方式
url:url,//从一个ajax数据源读取数据给表格内容
data:function(aoData){
reqData['dtJson'] = JSON.stringify(aoData)