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("");
}

並べ替えますが、アルファベット順ではありません。また、ページ付けする必要のある行ではなく、表示されている行のみを並べ替えます。

ただし、既存のすべての行を1つのページに表示できるように十分な行を表示することを選択した場合は、正常に機能しているようです(したがって、他の行を表示するためにページネーションは必要ありません)。

ページ付けが使用されているときに、選択された要素の選択されたテキストを使用して、テーブル全体で並べ替えを行うにはどうすればよいですか?

アップデート

私のテーブル構成(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() );

datatablesダウンロードで利用可能なライブ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 に答える