【问题标题】:Sort icon not changing in Datatable server side processing数据表服务器端处理中的排序图标不变
【发布时间】:2016-09-08 13:13:00
【问题描述】:

当我在数据表中使用服务器端处理时,排序工作但排序图标不会改变并且保持在同一方向。下面是我的数据表配置的代码sn-p。

$('#dtSearchResult').DataTable({
                    "filter": false,
                    "pagingType": "simple_numbers",
                    "orderClasses": false,
                    "order": [[0, "asc"]],
                    "info": true,
                    "scrollY": "450px",
                    "scrollCollapse": true,
                    "bLengthChange": false,
                    "searching": true,
                    "bStateSave": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": VMCreateExtraction.AppSecurity.websiteNode() + "/api/Collection/SearchCustIndividual",
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        aoData.push({ "name": "ccUid", "value": ccUid });
                       //Below i am getting the echo that i will be sending to Server side
                        var echo = null;
                        for (var i = 0; i < aoData.length; i++) {
                            switch (aoData[i].name) {
                                case 'sEcho':
                                    echo = aoData[i].value;
                                    break;
                                default:
                                    break;
                            }
                        }
                        $.ajax({
                            "dataType": 'json',
                            "contentType": "application/json; charset=utf-8",
                            "type": "GET",
                            "url": sSource,
                            "data": aoData,
                            success: function (msg, a, b) {
                                $.unblockUI();

                                var mappedCusNames = $.map(msg.Table, function (Item) {
                                    return new searchGridListObj(Item);
                                });
                                var data = {
                                    "draw": echo,
                                    "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS,
                                    "recordsFiltered": msg.Table1[0].FILTERED_RECORDS,
                                    "data": mappedCusNames
                                };
                                fnCallback(data);
                                $("#dtSearchResult").show();
                                ko.cleanNode($('#dtSearchResult')[0]);
                                ko.applyBindings(VMCreateExtraction, $('#dtSearchResult')[0]);
                            }
                        })
                    },
                    "aoColumns": [{
                        "mDataProp": "C_UID"
                    }, {
                        "mDataProp": "C_LAST_NAME"
                    }, {
                        "mDataProp": "C_FIRST_NAME"
                    }, {
                        "mDataProp": "C_USER_ID"
                    }, {
                        "mDataProp": "C_EMAIL"
                    }, {
                        "mDataProp": "C_COMPANY"
                    }],
                    "aoColumnDefs": [{ "defaultContent": "", "targets": "_all" },
                //I create a link in 1 st column
                    ]
                });

我在这里缺少一些配置。我在数据表论坛上阅读,人们强调的唯一问题是绘图应该与我们在服务器端发送的相同。

【问题讨论】:

  • 你能看到服务器代码返回的数据是否正确吗?您可能需要查看代码的“success: function (msg, a, b)”。
  • msg 是数据库返回的jsonResult,是正确的。我使用var data = { "draw": echo, "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS, "recordsFiltered": msg.Table1[0].FILTERED_RECORDS, "data": mappedCusNames };上方的这一行为 fnCallback 创建数据@
  • 已经做过了...已经在代码中进行了修复..但无济于事。

标签: datatables datatables-1.10


【解决方案1】:

对于任何寻找此问题的答案的人。伤心,但我不得不编写自己的函数如下:

function sortIconHandler(thArray, sortCol, sortDir) {
        for (i = 0; i < thArray.length; i++) {
            if (thArray[i].classList.contains('sorting_asc')) {
                thArray[i].classList.remove('sorting_asc');
                thArray[i].classList.add("sorting");
            }
            else if (thArray[i].classList.contains('sorting_desc')) {
                thArray[i].classList.remove('sorting_desc');
                thArray[i].classList.add("sorting");
            }
            if (i == sortCol) {
                if (sortDir == 'asc') {
                    thArray[i].classList.remove('sorting');
                    thArray[i].classList.add("sorting_asc");
                }
                else {
                    thArray[i].classList.remove('sorting');
                    thArray[i].classList.add("sorting_desc");
                }
            }
        }
    }

thararray-> 所有行标题的数组(你可以为此编写一个 jquery 选择器)。

sortCol->点击排序的列(数据表参数iSortCol_0)

sortDir -> 排序方向(数据表参数 sSortDir_0)

【讨论】:

    【解决方案2】:

    我知道这是一个旧线程,但请确保您没有与 jQuery 中的表捕获组关联的某个位置的 .off()。我有一个点击事件(出于某种原因)我附加了一个关闭功能。我花了 3 天时间才找到它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-10-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-10
      • 1970-01-01
      相关资源
      最近更新 更多