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

首先

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




  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.datatable是一款常用的前端表格插件,它支持前端和后端分页两种方式。在后端分页的情况下,数据请求和处理都在服务器端完成,前端只需要展示和呈现数据。 在使用jquery.datatable进行后端分页时,我们需要进行以下步骤: 1.准备后端接口:需要在服务器端提供一个接口来处理数据请求。这个接口需要接受一些参数,例如当前页码、每页显示数量等。接口会根据这些参数查询数据库,并返回相应的数据结果。 2.前端配置datatable插件:在前端页面中,需要引入jquery.datatable的相应脚本文件,并配置datatable的参数。其中,重要的参数包括ajax配置项,用于指定后端接口的URL,以及服务器端接口需要的参数。 3.发送数据请求:当用户操作表格进行翻页或者其他操作时,jquery.datatable会根据配置的ajax参数自动发送数据请求到后端接口。请求参数中包含当前页码、每页显示数量等信息。 4.服务器处理请求:后端接口接收到数据请求后,根据请求参数进行相应的查询和处理操作。可以使用数据库查询语言等方式查询数据库,并返回结果给前端。 5.前端展示数据:jquery.datatable会自动根据后端返回的数据结果,生成对应的表格展示。同时,它还提供了丰富的功能和样式配置选项,使得表格的展示更加灵活和美观。 总结来说,使用jquery.datatable进行后端分页需要准备后端接口,配置前端datatable,并进行数据请求和处理。这样就能够实现在前端页面展示由后端数据查询而来的分页表格。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值