Question

我正在为表格使用DataTables。我有一些选择元素的列。我想要的是根据所选的文本对这些列进行排序。在我可以找到的所有示例中，排序基于值，而不是文本。

这是执行此操作的标准方法示例（除了我将列转换为可见）并对值进行排序。

$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn, iColumnVis)
    {  
            iColumn = oSettings.oApi._fnColumnIndexToVisible( oSettings, iColumn );

        var aData = [];


$( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
        aData.push( $(this).val() );

    } );
    return aData;
};

我尝试做的是提取文本并将其推送到aData。选择的一些选项只是空的。

而不是“aData.push（$（this）.val（））;”我这样做：

if($.trim($("#" + $(this).attr('id') + " option:selected").text())!=""){
         aData.push($("#" + $(this).attr('id') + " option:selected").text());
    }else{ 
         aData.push("");
}

我排序但仍不按字母顺序排列。它只对可见行进行排序，而不是我必须分页的行。

但是，当我选择查看足够的行时，它似乎工作正常，因此所有现有的行都可以显示在一个页面上（因此，查看其他一些行不需要分页）。

如果在使用分页时使用选择的元素选择文本，如何在整个表格上实现排序？

更新

我的表配置（我从firebug复制了aoColumnDefs和covis（因为我在服务器端构建那些），因此我的配置中的格式可能不是100％正确但内容是相同的）：

$('#mytickettable').dataTable( {              
        "bJQueryUI": true,
        "oLanguage": {                          
            "sUrl": "https://" + hostname + "/modules/core/localization/locale/" + lang.user_locale + "/LC_MESSAGES/datatables.tr",
             "sSearch": "Search all columns:"
         },
         "iDisplayLength": 25,
         "sPaginationType": "full_numbers",
         "sDom": 'RHF<"top"TClpf>rt<"bottom"ip><"clear">',
         "oTableTools": { 
             "aButtons": [{
                  "sExtends":    "text",
                  "sButtonText": lang.localized_text.SHOW_HIDE_TICKET_OVERVIEW,
                   "fnClick": ticketoverview_handler                                         
                 },
                 { "sExtends":    "text",
                   "sButtonText": lang.localized_text.SHOW_HIDE_QUICK_FILTER,
                   "fnClick": function ( nButton, oConfig, oFlash ) {
                      $("#agentfilterform").toggle();
                      $("#show_closed_tickets").toggle();
                      if(page=='myticketsmenu'){
                           $("#agentfilter_asigned_ownerform").toggle();
                      }
                    }
                  },
                  {
                     "sExtends":    "text",
                     "sButtonText": lang.localized_text.REFRESH_TABLE,
                     "fnClick": function ( nButton, oConfig, oFlash ) {
                                 oTable.fnReloadAjax();
                      }
                   },                                                                        
                   {
                      "sExtends": "xls",  
                      "sButtonText": "Excel",
                      "sAction": "flash_save",
                      "sFileName": "Ticketlist.xls",                                        
                      "mColumns": "visible"
                   },  
                   {
                      "sExtends": "csv",
                      "sButtonText": "CSV",
                      "sFileName": "Ticketlist.csv",
                      "sAction": "flash_save",
                      "mColumns": "visible"
//                    "bShowAll": false
                    }]
                },
          "oColVis": {
               "aiExclude": [12],
               "bRestore": true,
               "buttonText": lang.localized_text.SHOW_HIDE_COLUMNS,
               "iOverlayFade": 0
          },
          "aaSorting": [[0, 'desc']],
          "aoColumnDefs": 
               [{"asSorting":["desc","asc","desc"],"aTargets":[0]},  
                {"sWidth":"50px","aTargets":[0]},
                {"sWidth":"65px","aTargets":[3]}, 
                {"sWidth":"175px","aTargets":[4]},
                {"sWidth":"110px","aTargets":[5]},
                {"sWidth":"110px","aTargets":[6]},
                {"sWidth":"125px","aTargets":[7]},
                {"sWidth":"110px","aTargets":[8]},
                {"sSortDataType":"dom-select","aTargets":[3]},
                {"sSortDataType":"dom-select","aTargets":[5]},
                {"sSortDataType":"dom-select","aTargets":[6]},
                {"bVisible":false,"aTargets":[9]},
                {"bVisible":false,"aTargets":[10]},
                {"bSearchable":true,"aTargets":[11]},
                {"bSearchable":true,"aTargets":[12]},
                {"bVisible":false,"aTargets":[12]},
                {"sSortDataType":"dom-select","aTargets":[1]},
                {"bVisible":false,"aTargets":[1]},
                {"bSearchable":true,"aTargets":[1]},
                {"sWidth":"65px","aTargets":[1]},
                {"sSortDataType":"dom-select","aTargets":[2]},
                {"sWidth":"75px","aTargets":[2]}]                       
                ,
                "bScrollCollapse": true,
                "bStateSave": false,                 
                "bProcessing": true,
                "sAjaxSource": "https://" + hostname + "/modules/core/ticket/get_ticket_list.php",
                "fnServerParams": function (aoData) {                             
                          aoData.push({"name":"show_closed", "value":show_closed});
                          aoData.push({"name":"page", "value":page});
                 },
                 "fnInitComplete": tablesetuphandler,
                 "fnPreDrawCallback": function(oSettings){
                       var $tableRow = $('#mytickettable tbody tr:eq(' + markedRow + ')');
                       $($tableRow).removeClass('row_selected');
                  },
                  "fnDrawCallback": function(oSettings){   
                  $(".ColVis_Button").button(); //fixbutton                            
                       if (tableInitiated) {
                              markedRow = markNewRow(0,0 );
                              var table = document.getElementById("mytickettable");
                              var row = table.rows[markedRow+1];
                              var cell = row.cells[id_index];
                              var $id = cell.firstChild.nodeValue;                                    
                              if(oTable.fnSettings().fnRecordsDisplay()==0){
                              }else if(old_id!=$id && oTable.fnSettings().fnRecordsDisplay()>0){
                                   load_ticket_overview($id);
                              }                                
                         }

                  }

         });

Answer 1

我认为我没有全面了解您正在做什么，但是当您为aData.push()尝试此操作时会发生什么？

aData.push( $(":selected", this).text() );

当我使用数据表下载中提供的live dom sort example进行尝试时，当我输入与选项值不同的文本时，分页和排序似乎正常。

Answer 2

根据@ mg1075的建议解决，但我在这里详细说明！

由于我遇到了一些问题，我认为我可能会将所选值的某些文本清空。为了缓解这种情况，我检查了文本是否为空，如果是这样的话，只检查了aData.push（“”）。

我检查值是否为空的方式是这样的：

if($.trim($("#" + $(this).attr('id') + " option:selected").text())!=""){}

这也是我将数据推送到aData的方式（除了修剪，但我没关系，因为通过修剪打印它仍然无法识别所有文本（见下文）。

aData.push($("#" + $(this).attr('id') + " option:selected").text())

现在这个我不明白的奇怪的事情;修剪后的文本不是空的唯一时间是“问题”一词是选定的文本。当它是“事件”或其他任何东西时，它被认为是空的。 如果有人可以有任何理论，那为什么呢？

所以@ mg1075实际上是正确的，我应该使用aData.push（$（“：selected”，this）.text（））;代替。但首先，当我尝试它时，我没有使用它检查它是否为空，但仅用于推送数据。现在我只使用aData.push（$ .trim（$（“：selected”，this）.text（）））;添加数据，我不检查它是否为空，因为它仍然有效。

在使用分页时，在包含选定元素的列中对选定文本上的整个DataTable进行排序

2 个答案: