首先
项目中引用前端分页js jquery.linq.min.js 百度下载
前端分页代码片段
表设置
var uploadUnsuccessfulDataColumns = [
{
"title": "序号",
defaultContent:"",
"name": "",
"data": "",
"orderable": false,
},
{
"title": "年度",
"name": "year",
"data": "year",
"orderable": false,
},
{
"title": "批次",
"name": "batch",
"data": "batch",
"orderable": false,
},
{
"title": "乡镇",
"name": "town",
"data": "town",
"orderable": false,
},
{
"title": "xls名称",
"name": "xlsName",
"data": "xlsName",
"orderable": false,
"render": function (data, type, full, meta) {
return " <a id='archive_"+full.id+"' class='shows_detail_view'>"+ data +"</a>";
}
},
]
datatable配置
var modifyTableSettings ={
"destroy": true,
"bDeferRender":false,//延迟渲染
"sPaginationType": "full_numbers",
"bPaginate": true,
"Paginate": true,
"lengthMenu": [10, 15, 20, 30, 40],
"searching": false,
"aaSorting": [0, "desc"],
"aoColumnDefs":[],
"data":uploadUnsuccessfulDatas,
"columns": uploadUnsuccessfulDataColumns,
//序号
"fnDrawCallback":function () {
var api = this.api();
var startIndex = api.context[0]._iDisplayStart;//获取本页开始的条数
api.column(0).nodes().each(function(cell, i) {
cell.innerHTML = startIndex + i + 1;
});
},
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": ": 以降序排列此列"
}
}
};
页面上加几个select
<select class="form-control " id="year_select" name="account">
<option>请选择年度</option>
</select>
给搜索框加入搜索内容 以及添加搜索事件 (搜索的内容就是从所有数据中取出来的) 其中包含datatable前端分页条件搜索 解决中文乱码问题
$(document).ready(function() {
var fileTable = $('#uploadUnsuccessfulTable').dataTable(modifyTableSettings);
//下拉框数据绑定 [[${unsuccess}]]是数据源 thymeleaf
var yearList = $.Enumerable.From([[${unsuccess}]]).Distinct("x=>x.year").Select("x=>x.year").ToArray();
$(yearList).each(function () {
$('#year_select').append('<option>'+this.toString()+'</option>');
});
var batchList = $.Enumerable.From([[${unsuccess}]]).Distinct("x=>x.batch").Select("x=>x.batch").ToArray();
$(batchList).each(function () {
$('#batch_select').append('<option>'+this.toString()+'</option>');
});
var townList = $.Enumerable.From([[${unsuccess}]]).Distinct("x=>x.town").Select("x=>x.town").ToArray();
$(townList).each(function () {
$('#town_select').append('<option>'+this.toString()+'</option>');
});
//查询事件 添加前端分页查询按钮的点击事件
$('#selectUnsuccessfulBtn').click(function () {
var year = $('#year_select').find("option:selected").text();
var batch = $('#batch_select').find("option:selected").text();
var town = $('#town_select').find("option:selected").text();
//使用 linq 对数据源做筛选
var datas = [[${unsuccess}]];
if(year.length != 0 && datas.length!=0&&year!="请选择年度")
datas = $.Enumerable.From(datas).Where("x=> x.year == "+year).ToArray();
if(batch.length != 0 && datas.length!=0&&batch!="请选择批次")
datas = $.Enumerable.From(datas).Where("x=> x.batch == "+batch).ToArray();
if(town.length != 0 && town.length!=0&&town!="请选择乡镇")
datas = $.Enumerable.From(datas).Where("x=> x.town == decodeURI('"+town+"')").ToArray();
//清空 datatables 中数据
fileTable.fnClearTable();
//若记录条数不为0则将记录加入 datatables 中
datas.length != 0? fileTable.fnAddData(datas):null;
});});
自此,代码完了,如果有错误,欢迎指出。 可能少引啥js等的错误,出错就改。