Sorting DataTables Based on Self Defined Descending or Ascending

Question

I have a dropdown list with Descending and Ascending for users to choose. I have to sort my DataTables based on the dropdown list that user select. For example, if user selects Ascending, I will sort the DataTables in the Ascending Order. Is there a way I can implement it in my codes? Thanks.

<script>
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var select_value = $('#select_value').val();
            var select_column = $('#select_column').val();
            var column_index = '';
            //var column = data[1] || 0; // use data for the age column
            if ( select_value == '' || select_column == '' )
            {
                return true;
            }
            else {
                //get the column name of data table
                var column = 0;
                $('#dataTable_table thead tr th').each(function(){
                    if( $(this).text() == select_column.toString())
                    {
                        return false;
                    }
                    column = column + 1;
                });
                column = data[column] || 0;
                if(column!==0 && column.indexOf(select_value.toString()) >= 0)
                {
                    return true;
                }
            }
            return false;
        }
    );
    $.fn.dataTableExt.sErrMode = 'throw';
    $(document).ready(function () {
        var  table = $('#dataTable_table').DataTable();
        $('#select_value').keyup( function() {
            table.draw();
        });
    });

$(document).ready(function() {
$('#example').DataTable();
// this is for select dropdown when change
$('.toSort').on('change',function(){
    var thisValue = $(this).val();
    var ThisSort = $(this).attr('data-sort');
    // trigger click on (1) mean first column .. you can change (1) to (2) and see the result
    var column = $('#example  thead  tr  th:nth-child(1)');
    // make if statement to check which option user choose
    if(thisValue == 'asc' && ThisSort !== 'asc'){
        // trigger click
        column.trigger('click');
        $(this).attr('data-sort', 'asc');
    }else if(thisValue == 'des' && ThisSort !== 'des'){
        column.trigger('click');
        $(this).attr('data-sort', 'des');
    }
});

} );

javascript would be best, as soon as they select the item, have jquery event watching each of the selections by name, then run your action after they select. you can do this via ajax call. — blamb, Nov 09 '15 at 03:36
@BrianThomas Not very sure how to go about with it. A beginner in AJAX. Possible to help a little? — DivyaK, Nov 09 '15 at 03:37
does this help a bit? http://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function — blamb, Nov 09 '15 at 03:39
I think you can trigger a click on column header you want to sort — Mohamed-Yousef, Nov 09 '15 at 03:39
That one sorts in any order as long as you click on it but i need to view it based on user selection. @Mohamed-Yousef — DivyaK, Nov 09 '15 at 03:41
make an on.ready if you dont have one, then in that add an event, then fire the action in that event using the url i attached. Can you look into it for a sec then refine your question? If i see that's the way you want to go, ill give you a code sample in an answer. — blamb, Nov 09 '15 at 03:44
Yup you are right! @BrianThomas Its supposed to be that way to get the table to be in desc/asc but how do i go about adding it in my datatables code — DivyaK, Nov 09 '15 at 03:47
` $(document).ready(function () { var table = $('#dataTable_table').DataTable(); $('#select_value').keyup( function() { table.draw(); }); $('#inputId').on.('click', function(){ //call database again, applying it to a variable $ajax().success(function(data){ $.('#inputId').html(data);}); }) });` looking into that, try something like this for the time being — blamb, Nov 09 '15 at 03:59
take a look at this http://jsfiddle.net/mohamedyousef1980/ak53eho3/1/ — Mohamed-Yousef, Nov 09 '15 at 04:11
@Mohamed-Yousef Exactly what I am looking for but my Asc and Desc has to come from database. What do I do? — DivyaK, Nov 09 '15 at 06:01
In this case you have to use $.ajax like @BrianThomas said .. and go to the link he posted in his comment.. its will be helpful for you to start .. and my answer [here](http://stackoverflow.com/questions/33578275/jquery-to-submit-php-not-executing/33578299#33578299) may help too — Mohamed-Yousef, Nov 09 '15 at 06:42
i thought you were using php, what are you using for the db call? otherwise, just plug that functionality into however your getting your data thats being sorted. — blamb, Nov 09 '15 at 07:17
I am using PHP to do a select statement for all my data out from database. The Desc and Asc has to be retrieved from DB as well @BrianThomas — DivyaK, Nov 09 '15 at 07:19
ok perfect then, notice how i passed that sort through ajax, where you see `var selectedSort = $(this);`, thats where its getting the string words "ASC" or the word "DESC" then it ads that to the POST data for php. you have to have those string words in your dropdown box, as `value="ASC"` and `value="DESC"` in your selects. now i didnt put too much brain power into thinking out the usage of this, you might need to loko at this first `console.log($(this))` and you will find your data in there somewhere (your data is the word ASC, for example) — blamb, Nov 09 '15 at 07:22

score 0 · Answer 1 · edited May 23 '17 at 12:03

You can use ajax for this nicely.

given a dropdown select box for your input, make sure you have the name="someAttribute" in yoru in each select option, then you will use this name to access the value to which they selected. jQuery get html id from selected dropdown

So try something like this, using a jquery click event, adding it to your ready function below your existing keyup event;

//in your ready funtion
$(document).ready(function () {
   var table = $('#dataTable_table').DataTable();
    $('#select_value').keyup( function() {
       table.draw();
     });

     // click event
    $("select[name$='someAttribute']").on.('click', function(){

        var selectedSort = $(this);

        //call database again, applying it to a variable
        $.ajax({
            type: 'POST',
            url: 'yourDbClass.php',
            data: 'sort=' + selectedSort ,
            dataType: 'json',
            cache: false,
            success: function(result) {
              $("select[name$='someAttribute']").html(data[0]);
            },
        });
     })
  });

Now on your php method that makes call to your db table, have a param $sort, this is what your posting to that method. then return results, which will come back to ajax.

and here is a good tutorial on the ajax call that you will be putting there using jquery $.ajax to call a PHP function

Edited code example.

So, ajax.php is your php database code, which returns a json encoded array

return json_encode($yourMySqlresults);

just gave full example above, that about sums it up. what dots can i help you connect that your not seeing? that `$ajax()` is firing immediately when written exactly like that (its when they click, it fires, bam.. and the `.success()` means its done. so then it uses those results in the success part to add them back to your dom. — blamb, Nov 09 '15 at 07:19

Sorting DataTables Based on Self Defined Descending or Ascending

1 Answers1