java datatable 前端分页 查询条件解决中文乱码

版权声明：本文为博主原创文章，欢迎大家转载。 https://blog.csdn.net/q11604316081/article/details/79392718

首先

项目中引用前端分页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等的错误，出错就改。