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