Databases
StackOverflow2013
Postsdbo
POSort entire DataTables on selected text in columns containing select elements when pagination is used
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSort entire DataTables on selected text in columns containing select elements when pagination is used
    text
    copied!<p>I am using DataTables for my tables. I am having a few columns with select elements. What I want is to sort those columns based on the text that is selected. In all examples I can find, the sorting is based on the value, not the text. </p> <p>This is the example which is the standard way of doing it (with the exception that I convert the column to visible) and sorts on the value. </p> <pre><code>$.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; }; </code></pre> <p>What I have tried to do is extract the text and push it to aData. Some of the options that has been selected is just empty. </p> <p>Instead of "aData.push( $(this).val() );" I do this: </p> <pre><code>if($.trim($("#" + $(this).attr('id') + " option:selected").text())!=""){ aData.push($("#" + $(this).attr('id') + " option:selected").text()); }else{ aData.push(""); } </code></pre> <p>I sorts but still not in alphabetic order. And it only sort the visible rows, not the rows I have to paginate to. </p> <p>However, it seems to work fine when I chose to view enough rows so all existing rows can be presented on one single page (hence, no pagination needed to view some other rows). </p> <p>How can I achieve sorting on the entire table using the select elements selected text when pagination is used? </p> <p><strong>UPDATE</strong></p> <p>My table config (I copied aoColumnDefs and covis from firebug (since I am constructing those on server side), hence the format may not be 100% correct in my config below but the content is the same): </p> <pre><code>$('#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&lt;"top"TClpf&gt;rt&lt;"bottom"ip&gt;&lt;"clear"&gt;', "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 &amp;&amp; oTable.fnSettings().fnRecordsDisplay()&gt;0){ load_ticket_overview($id); } } } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload