Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
397 lines (342 sloc) 13.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Datatables简单封装</title>
<link rel="stylesheet" type="text/css" href="plugin/datatables/jquery.dataTables.min.css">
<script src="plugin/datatables/jquery.js"></script>
<script src="plugin/datatables/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
是否自动检索:<input type="checkbox" id="autoSearch">
<br>
姓名:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="1" id="col1_filter">
<br>
地点:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="2" id="col2_filter">
<br>
薪水:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="3" id="col3_filter">
<br>
入职时间:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="4" id="col4_filter">
<br>
办公地点:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="5" id="col5_filter">
<br>
编号:<input type="text" class="form-controlSearch" placeholder="请输入关键字查询" data-column="6" id="col6_filter">
<br>
<hr>
<table id="example" class="display">
<thead>
<tr>
<th><input type="checkbox" id="employeeCheckAll"></th>
<th>姓名</th>
<th>地点</th>
<th>薪水</th>
<th>入职时间</th>
<th>办公地点</th>
<th>编号</th>
</tr>
</thead>
</table>
</div>
<script>
var employee = {};
employee.property = {
version:"v1.0",
name:"employee",
tableId:"example",
checkAllId:"employeeCheckAll",
buttonId:"employeeButtonId",
formId:"employeeForm",
corporateFormId:"employeeForm",
returnStatus:"SUCCESS",
returnTitle:"操作成功",
statusTitle:"请选择一条数据!",
idFailure:"获取id失败",
prompt:"提示",
pleaseConfirm:"请确认!",
wantToDelete:"您确定要删除吗?",
sexMan:"",
sexWoman:"",
isTest:"",
noTest:"",
banned:"禁用",
enable:"启用"
};
//初始化配置
employee.gridInit = {
searching:true,
lengthChange:true,
paging:true,
scrollCollapse:true,
serverSide:false,
search:true,
processing:true,
scrollY:500,
scrollX:"100%",
scrollXInner:"100%",
scrollCollapse:true,
jQueryUI:false,
autoWidth:true,
autoSearch:false
};
//路径配置
employee.url="/";
employee.requestUrl = {
queryList:employee.url+"objects.txt"
};
employee.search={
uuid:""
};
employee.status = [
{"searchable": false, "orderable": false, "targets": 0},//第一行不进行排序和搜索
// {"targets": [12], "visible": false}, //设置第13列隐藏/显示
// {"width": "10%", "targets": [1]}, //设置第2列宽度
// {
// 对第7列内容进行替换处理
// targets: 6,
// render: function (data, type, row, meta) {
// if (data == "1") {
// return employee.table.sexMan;
// }
// if (data == "0") {
// return employee.table.sexWoman;
// }
// }
// },
{defaultContent: '',targets: ['_all']} //所有列设置默认值为空字符串
];
employee.filed =[
{ "data": "extn",
"createdCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<input type='checkbox' name='checkList' value='" + sData + "'>");
}
},
{"data": "name"},
{"data": "position"},
{"data": "salary"},
{"data": "start_date"},
{"data": "office"},
{"data": "extn"}
];
employee.buttons =
'<button class="btn btn-default" type="button" id="reload" data-toggle="modal" data-target="#employeeModal">刷新表格</button>'+
'<button class="btn btn-primary" type="button" id="batchIds" style="margin-left:20px;" data-toggle="modal" >多选</button>'+
'<button class="btn btn-success" type="button" id="selection" style="margin-left:20px;" data-toggle="modal" >单选</button>'+
'<button class="btn btn-success" type="button" id="search" style="margin-left:20px;" data-toggle="modal" >查询</button>'+
'<button class="btn btn-success" type="button" id="clearSearch" style="margin-left:20px;" data-toggle="modal" >重置</button>';
</script>
<script>
var eloancn = {};
eloancn.table={
grid:"",
statusTitle:"请选择一条数据!"
};
//dataTables方法封装
function dataTablesInit(elo){
eloancn.table.grid = $('#'+elo.property.tableId).DataTable({
ajax: {
url: elo.requestUrl.queryList,//请求后台路径
type: 'POST',
data: elo.search,
error: function(jqXHR, textStatus, errorMsg){
alert("请求失败");
}
},
"searching":elo.gridInit.searching,//搜索框,默认是开启
"lengthChange": elo.gridInit.lengthChange,//是否允许用户改变表格每页显示的记录数,默认是开启
"paging": elo.gridInit.paging,//是否开启本地分页,默认是开启
"processing": elo.gridInit.processing,//是否显示中文提示
"scrollCollapse" : elo.gridInit.scrollCollapse, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
"serverSide": elo.gridInit.serverSide, //开启服务器模式,默认是关闭
"scrollY": elo.gridInit.scrollY,//设置高
"scrollX": elo.gridInit.scrollX,//设置宽度
"scrollXInner": elo.gridInit.scrollXInner,//设置内宽度
"scrollCollapse": elo.gridInit.scrollCollapse,//设置折叠
"jQueryUI": elo.gridInit.jQueryUI,//jquery 风格
"autoWidth" : elo.gridInit.autoWidth, //是否自适应宽度
"columns":elo.filed,//字段
"columnDefs":elo.status,//列表状态
"language": {
"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": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
"dom": "<'row'<'col-sm-2'l><'#"+elo.property.buttonId+".col-sm-10'><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"initComplete":function(){
$("#"+elo.property.buttonId).append(elo.buttons);
if(elo.gridInit.search){
$search = $("input[type='search']");
//隐藏默认的搜索框
$search.parent().hide();
}
//加载完成之后 初始化checkbox
checkbox(elo.property.tableId);
$("#reload").click(function(){
reload();
});
$("#batchIds").click(function () {
batchIds();
});
$("#selection").click(function () {
selection();
});
$("#search").click(function () {
search();
});
$("#clearSearch").click(function () {
clearSearch("form-controlSearch");
});
//checkbox全选
$("#"+elo.property.checkAllId).click(function () {
if ($(this).prop("checked")) {
$("input[name='checkList']").prop("checked",true);
$("tr").addClass('selected');
} else {
$("input[name='checkList']").prop("checked",false);
$("tr").removeClass('selected');
}
});
}
});
//错误信息提示
$.fn.dataTable.ext.errMode = function(s,h,m){
if(h==1){
alert("连接服务器失败!");
}else if(h==7){
alert("返回数据错误!");
}
};
//回调,如果返回的时候有问题提示信息
eloancn.table.grid.on('xhr.dt', function ( e, settings, json, xhr ) {
console.log("重新加载了数据");
if(typeof(json.code)!="undefined" && json.code!="0"){
alert(json.message);
}
} );
//鼠标经过高亮
var lastIdx = null;
eloancn.table.grid.on( 'mouseover', 'td', function () {
if(typeof(eloancn.table.grid.cell(this).index())!="undefined"){
var colIdx = eloancn.table.grid.cell(this).index().column;
if ( colIdx !== lastIdx ) {
$( eloancn.table.grid.cells().nodes() ).removeClass( 'highlight' );
$( eloancn.table.grid.column( colIdx ).nodes() ).addClass( 'highlight' );
}
}
} );
eloancn.table.grid.on( 'mouseleave', function () {
$(eloancn.table.grid.cells().nodes()).removeClass( 'highlight' );
} );
//自动搜索方法
$('.form-controlSearch').on('keyup change', function () {
elo.gridInit.autoSearch = $("#autoSearch").prop("checked");
if(elo.gridInit.autoSearch){
filterColumn( $(this).attr('data-column') );
}
} );
}
//选中一行 checkbox选中
function checkbox(tableId){
//每次加载时都先清理
$('#'+tableId+' tbody').off("click","tr");
$('#'+tableId+' tbody').on("click", "tr", function () {
$(this).toggleClass('selected');
if($(this).hasClass("selected")){
$(this).find("input").prop("checked",true);
}else{
$(this).find("input").prop("checked",false);
}
});
}
//按钮搜索方法
function search(){
var oSettings = "";
$("[data-column]").each(function(){
var filedValue = $(this).attr('data-column');
if(filedValue!=""){
console.log($('#col'+filedValue+'_filter').val());
oSettings = eloancn.table.grid.column(filedValue).search(
$('#col'+filedValue+'_filter').val()
);
}
});
//搜索的数据一次条件,节省资源
eloancn.table.grid.draw(oSettings);
}
//搜索
function filterColumn(i) {
eloancn.table.grid.column(i).search(
$('#col'+i+'_filter').val()
).draw();
}
//清理搜索数据
function clearSearch(id){
$("."+id).each(function(){
$(this).val("");
});
//清空查询条件重新读取数据
eloancn.table.grid.columns().search("").draw();
}
//获取所有选中行的UUID
function batchIds(){
var uuid = '';
var uuids =eloancn.table.grid.rows(".selected").data();
if(uuids.length==0){
alert(eloancn.table.statusTitle);
}else{
for(var i=0;i<uuids.length;i++){
uuid = uuid+uuids[i].extn+",";
}
alert(uuid);
}
}
//单选
function selection(){
if (eloancn.table.grid.rows(".selected").data().length==1) {
var uuid =eloancn.table.grid.row(".selected").data().extn;
if(uuid==""){
alert(eloancn.table.statusTitle);
}else{
alert(uuid);
}
}else{
alert(eloancn.table.statusTitle);
}
}
//刷新页面
//重新加载数据
function reload(){
eloancn.table.grid.ajax.reload();
}
//销毁table
function destroyDataTable(tableId){
var dttable = $('#'+tableId).DataTable();
dttable.destroy();
}
</script>
<script>
$(document).ready(function(){
dataTablesInit(employee);
});
</script>
</body>
</html>