首先
項目中引用前端分頁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等的錯誤,出錯就改。