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，但是返回给前端，前端重绘表格 这两个步骤不知道哪儿出了问题。

    点赞 评论 复制链接分享
提交

为你推荐