首先

專案中引用前端分頁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等的錯誤，出錯就改。