How to sort properly content of Select input?

gbmapo

Using Individual column searching (select inputs) as an example, I added 2 select inputs to my table:

    initComplete: function () {
      this.api().columns([1, 8]).every(function (i) {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($("#listofservices thead tr:eq(1) th").eq(column.index()).empty())
          .on('change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();to extract the value 
          });

        switch (i) {
          case 1:
            column.data().unique().sort().each(function (d, j) {
              select.append('<option value="' + d + '">' + d + '</option>')
            });
            break;
          case 8:
            column.data().unique().sort().each(function (d, j) {
              var sText = $('<a/>').html(d).text();
              select.append( '<option value="' + sText + '">' + sText + '</option>' );
            });
            break;
          default:
        }
      });
    }

The content of the select inputs is currently sorted according to the content of the column.

For the second input (case 8 in the code), the cell is a link (hence the var sText to extract the value).
I would like this select to be sorted by the values.

How can I do that?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

gbmapo

Here is the test case: live.datatables.net/conivehu/1/

kthorngren

One solution is to create an object with the key being sText and the value being the select option. Then loop through the object sorting the keys to append to the select. For example:
http://live.datatables.net/remamuxi/1/edit

Kevin

gbmapo

Thanks Kevin.
I found another solution:

    case 8:
      column.data().unique().sort(
        function (x, y) {
          x2 = $('<a/>').html(x).text();
          y2 = $('<a/>').html(y).text();
          return x2 == y2 ? 0 : x2 > y2 ? 1 : -1;
        }
      ).each(function (d, j) {
        var sText = $('<a/>').html(d).text();
        select.append('<option value="' + sText + '">' + sText + '</option>');
      });
      break;

But as my skills in javascript are very limited, I have no idea how "good practice" it is...