1

我正在为我的表使用 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);
                              }                                
                         }

                  }

         });
4

2 回答 2

1

我不认为我有你在做什么的全貌,但是当你尝试这个时会发生什么aData.push()

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

当我尝试使用数据表下载中提供的实时 dom 排序示例时,当我输入与选项值不同的文本时,分页和排序似乎工作正常。

于 2012-08-21T23:16:54.697 回答
0

根据@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())); 要添加数据,我不检查它是否为空,因为它无论如何都可以工作。

于 2012-08-22T09:34:49.507 回答