locked
Automatically Sorting event for Jquery data table is triggering when trying to filter columns RRS feed

  • Question

  • User-513593581 posted

    Dear All,
    In my fiddle I had moved my footer to header , But sorting is taking place when I try to filter the column.
    For that I had created another thead and trying to point the sort to newly created thead by following the url which is exactly matching my requirement
    I tried adjusting the the below code. But find no luck can any one please do let me know what's the issue 

      $('#example').DataTable( {
            initComplete: function () {
                this.api('thead tr:eq(1) th').columns().every( function () {
                    var column = this;
                      $(column.header()).append("<br>")
                    var select = $('<select><option value=""></option></select>')
                       .appendTo($(column.header()))
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
    
                        var table = $('#example').DataTable({orderCellsTop: true
                                   });
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
    
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        } );

     

    Friday, April 27, 2018 2:23 PM

All replies

  • User36583972 posted


    Hi spspecalist,

    Dear All,
    In my fiddle I had moved my footer to header , But sorting is taking place when I try to filter the column.
    For that I had created another thead and trying to point the sort to newly created thead by following the url which is exactly matching my requirement
    I tried adjusting the the below code. But find no luck can any one please do let me know what's the issue 

    Please refer the following sample.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                var table = $('#example').DataTable({
                    "bFilter": true,
                    "bSortCellsTop": true,
                    "scrollCollapse": true,
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var columnIndex = this.index();
                            switch ($(".filter th:eq(" + columnIndex + ")").attr('class')) {
                                case 'combo':
                                    var select = $('<select style="width:100%;"><option value=""></option></select>')
                                        .appendTo($(".filter th:eq(" + columnIndex + ")").empty())
                                        .on('change', function () {
                                            var val = $.fn.dataTable.util.escapeRegex(
                                                $(this).val()
                                            );
                                            column
                                                .search(val ? '^' + val + '$' : '', true, false)
                                                .draw();
                                        });
    
                                    column.data().unique().sort().each(function (d, j) {
                                        select.append('<option value="' + d + '">' + d + '</option>')
                                    });
                                    break;
    
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <table id="example" class="display" style="width: 100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                <tr class="filter">
                    <th class="combo"></th>
                    <th class="combo"></th>
                    <th class="combo"></th>
                    <th class="combo"></th>
                    <th class="combo"></th>
                    <th class="combo"></th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
    
            </tbody>
        </table>
    </body>
    </html>
    

    Best Regards,

    Yong Lu

    Monday, April 30, 2018 8:10 AM
  • User1359092739 posted
    To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

    <!-- choose a theme file -->
    <link rel="stylesheet" href="/path/to/theme.default.css">
    <!-- load jQuery and tablesorter scripts -->
    <script type="text/javascript" src="/path/to/jquery-latest.js"></script>
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

    <!-- tablesorter widgets (optional) -->
    <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
    tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
    </tr>
    <tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
    </tr>
    <tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
    </tr>
    <tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    Start by telling tablesorter to sort your table when the document is loaded:

    $(function() {
    $("#myTable").tablesorter();
    });
    Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

    $(function() {
    $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
    });
    Friday, June 8, 2018 12:36 PM