weixin_39999532
weixin_39999532
2020-12-29 00:53

datables后端分页后,如何进行排序功能的实现

1. 使用DataTables的源(CDN地址、本地源文件)

2. DataTables的版本

版本为1.9

3. 开发语言、框架(Java/NodeJs/PHP、Vue/Ng2/React/JQuery)

java/jquery

4. 使用DataTables的配置信息

$('.data-table').dataTable({ "bPaginate": true, // 翻页功能 "bJQueryUI": true, // 是否应用jquery ui themeroller的风格 "bLengthChange": false, // 改变每页显示数据数量 "bFilter": true, // 过滤功能 "bSort": true, // 排序功能 "bInfo": true, // 页脚信息 "sPaginationType": "full_numbers", // 显示数字的翻页样式 "sDom": '<""l>t<"F"fp>', "bAutoWidth": true, // 自适应宽度 //"iDisplayLength": 10, // 设置每页显示的数据个数 "oLanguage": { // 设置提示信息国际化, 此处需要注意地址, 否则会导致地址栏重新请求 "sUrl": "/theme/js/jquery.pager.cn.txt" }, / 分页请求start==== / "bServerSide" : true,//服务器处理分页,默认是false,需要服务器处理,必须true "sAjaxDataProp" : "aaData",//默认情况下,DataTables在从Ajax源获取数据或服务器端处理时将查找属性“aaData” - 此参数允许更改该属性。您可以使用Javascript虚线对象表示法来获取多个嵌套级别的数据源。 "sAjaxSource": "/studentmodule/StudentMaintainAction.a?toPageList", //发起ajax请求的方式 "sServerMethod": "POST", //设置用于对服务器端处理或Ajax源数据进行Ajax调用的HTTP方法。 //"data": param, //传递参数方式 //"fnServerData": retrieveData, //执行函数 "fnDrawCallback" : function(oSettings){ / 给总条数赋值 / $("#recordCount").html("共"+oSettings._iRecordsDisplay+"条记录"); console.log(oSettings)

            // 修改 跳转页面
                $('.updateSchool').click(function() {
                    loadMask();
                    asyncLoadResourceByElement($(this), function() {
                        unLoadMask();
                    });
                });
              },
            //初始化要显示的列
            "aoColumns" : [{
                             "mDataProp" : null,//获取列数据,跟服务器返回字段一致 
                             "fnRender" : function(data, type, row, meta) {//返回自定义的样式 
                                 return data.iDataRow+1;
                                    }
                            },{
                             //操作列
                             "mDataProp" :null ,//获取列数据,跟服务器返回字段一致 
                             "fnRender" : function(data, type, row, meta) {//返回自定义的样式 
                                 return '<a title="修改记录" class="updateSchool" style="cursor:pointer;"  class="tip-bottom" data-url="/studentmodule/StudentMaintainAction.a?sendStudentUpdatePage&studentId='+data.aData.studentId+'"><i class="icon-edit"></i></a> &nbsp;<span>|</span>&nbsp;<a title="删除记录"  class="tip-bottom" href="#" onclick="setDataId(\''+data.aData.studentId+'\',\''+data.aData.guid+'\');"> <i class="icon-remove"></i></a>';
                                    }
                           }, {
                             "mDataProp" : "name"
                           }, {
                             "mDataProp" : "studentSex"
                           }, {
                             "mDataProp" : "studentSchoolName"
                           }, {
                             "mDataProp" : "cardNo"
                           }, {
                             "mDataProp" : "contactNo"
                           } ],
            /* 分页请求end =====*/
        });

// 此处填写格式化代码

5. 错误信息或截图

就是现在我的思路是前台点击某一列排序的时候把column传到后台然后进行排序,现在的问题就是不熟悉怎么获取到这个column。

6. 其他你认为可以帮助解决问题的信息

有其他解决方案也可以

该提问来源于开源项目:ssy341/datatables-cn

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

9条回答

  • weixin_39874196 weixin_39874196 3月前

    如果两个请求之间的data值不同, image image

    贴一下你的代码,看下你如何配置的dt 注意代码的格式化。

    首先谢谢谢谢大佬能在工作之余能够给我解答,

    image 上面是我dt的配置

    image 上面是点了排序按钮后向后台发出的请求,确认了排序字段和规则都已经带过去了。 image image 这两个都点了两次后返回的字段,确认了都有值。

    我没找到有点了排序按钮 数值返回后,在哪儿能重绘。

    点赞 评论 复制链接分享
  • weixin_39603397 weixin_39603397 3月前

    如果两个请求之间的data值不同, image image 贴一下你的代码,看下你如何配置的dt 注意代码的格式化。

    首先谢谢谢谢大佬能在工作之余能够给我解答,

    image 上面是我dt的配置

    image 上面是点了排序按钮后向后台发出的请求,确认了排序字段和规则都已经带过去了。 image image 这两个都点了两次后返回的字段,确认了都有值。

    我没找到有点了排序按钮 数值返回后,在哪儿能重绘。

    确认下两次值中的data数据是否不同 只有data不同,页面才会看出明显的变化。 比对下两个请求响应值data中数据json是否一样。

    点赞 评论 复制链接分享
  • weixin_39603397 weixin_39603397 3月前

    如果两个请求之间的data值不同, image image

    贴一下你的代码,看下你如何配置的dt 注意代码的格式化。

    点赞 评论 复制链接分享
  • weixin_39603397 weixin_39603397 3月前

    比对下两个请求之间的data的不同 image

    点赞 评论 复制链接分享
  • weixin_39842237 weixin_39842237 3月前

    可以在控制器中查看到完整的参数,参数中有个order数组,存的就是排序列

    点赞 评论 复制链接分享
  • weixin_39874196 weixin_39874196 3月前

    同问,有了排序后,点击表头上的排序按钮会有请求发送给后端,但是前端并没有变化,感觉前端没有接受到后端给返回的数据重新渲染。

    点赞 评论 复制链接分享
  • weixin_39603397 weixin_39603397 3月前
    1. 打开浏览器调试工具,windows下F12快捷键,或者chrome浏览器中页面鼠标右键“检查”。
    2. 选择 Network 面板,点击 任意列排序 按钮后,查看network中提交的请求
    3. 请求参数有 columns 和 order 字段,order为排序的字段index及排序方式,columns标明每列数据的源。使用这两个字段进行排序。

    可参考该页面

    https://www.datatables.net/examples/data_sources/server_side.html

    code
    columns[0][data]: 0
    columns[0][name]: 
    columns[0][searchable]: true
    columns[0][orderable]: true
    columns[0][search][value]: 
    columns[0][search][regex]: false
    columns[1][data]: 1
    columns[1][name]: 
    columns[1][searchable]: true
    columns[1][orderable]: true
    columns[1][search][value]: 
    columns[1][search][regex]: false
    columns[2][data]: 2
    columns[2][name]: 
    columns[2][searchable]: true
    columns[2][orderable]: true
    columns[2][search][value]: 
    columns[2][search][regex]: false
    columns[3][data]: 3
    columns[3][name]: 
    columns[3][searchable]: true
    columns[3][orderable]: true
    columns[3][search][value]: 
    columns[3][search][regex]: false
    columns[4][data]: 4
    columns[4][name]: 
    columns[4][searchable]: true
    columns[4][orderable]: true
    columns[4][search][value]: 
    columns[4][search][regex]: false
    columns[5][data]: 5
    columns[5][name]: 
    columns[5][searchable]: true
    columns[5][orderable]: true
    columns[5][search][value]: 
    columns[5][search][regex]: false
    order[0][column]: 2
    order[0][dir]: asc
    

    上例即为 排序 order使用的第1个条件为column中的第3列,正序。

    因为 columns 是在dt的option里面配置的,此时知道对应的排序列。取对应的columnName即可

    点赞 评论 复制链接分享
  • weixin_39603397 weixin_39603397 3月前

    同问,有了排序后,点击表头上的排序按钮会有请求发送给后端,但是前端并没有变化,感觉前端没有接受到后端给返回的数据重新渲染。

    先使用调试工具查看后端是否获取到传递的参数,以及后端响应结果是否发生变化,再确认前端是否重绘 draw。

    点赞 评论 复制链接分享
  • weixin_39874196 weixin_39874196 3月前
    1. 打开浏览器调试工具,windows下F12快捷键,或者chrome浏览器中页面鼠标右键“检查”。
    2. 选择 Network 面板,点击 任意列排序 按钮后,查看network中提交的请求
    3. 请求参数有 columns 和 order 字段,order为排序的字段index及排序方式,columns标明每列数据的源。使用这两个字段进行排序。

    可参考该页面

    https://www.datatables.net/examples/data_sources/server_side.html

    
    columns[0][data]: 0
    columns[0][name]: 
    columns[0][searchable]: true
    columns[0][orderable]: true
    columns[0][search][value]: 
    columns[0][search][regex]: false
    columns[1][data]: 1
    columns[1][name]: 
    columns[1][searchable]: true
    columns[1][orderable]: true
    columns[1][search][value]: 
    columns[1][search][regex]: false
    columns[2][data]: 2
    columns[2][name]: 
    columns[2][searchable]: true
    columns[2][orderable]: true
    columns[2][search][value]: 
    columns[2][search][regex]: false
    columns[3][data]: 3
    columns[3][name]: 
    columns[3][searchable]: true
    columns[3][orderable]: true
    columns[3][search][value]: 
    columns[3][search][regex]: false
    columns[4][data]: 4
    columns[4][name]: 
    columns[4][searchable]: true
    columns[4][orderable]: true
    columns[4][search][value]: 
    columns[4][search][regex]: false
    columns[5][data]: 5
    columns[5][name]: 
    columns[5][searchable]: true
    columns[5][orderable]: true
    columns[5][search][value]: 
    columns[5][search][regex]: false
    order[0][column]: 2
    order[0][dir]: asc
    

    上例即为 排序 order使用的第1个条件为column中的第3列,正序。

    因为 columns 是在dt的option里面配置的,此时知道对应的排序列。取对应的columnName即可

    同问,有了排序后,点击表头上的排序按钮会有请求发送给后端,但是前端并没有变化,感觉前端没有接受到后端给返回的数据重新渲染。

    先使用调试工具查看后端是否获取到传递的参数,以及后端响应结果是否发生变化,再确认前端是否重绘 draw。

    检查了有请求到后端,在后端也能拿到排序字段和排序的规则,并且拼接成了正确的sql,但是返回给前端,前端重绘表格 这两个步骤不知道哪儿出了问题。

    点赞 评论 复制链接分享