テーブルに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);
}
}
}
});