javascript - Table sorting issue on hidden row -
table sorting issue on hidden row. have created fiddle. please this.
function sorttable(f, n) { var rows = $('.videolisttble tbody tr').get(); rows.sort(function (a, b) { var = getval(a); var b = getval(b); if (a < b) { return -1 * f; } if (a > b) { return 1 * f; } return 0; }); function getval(elm) { var v = $(elm).children('td').eq(n).text().touppercase(); if ($.isnumeric(v)) { v = parseint(v, 10); } return v; } $.each(rows, function (index, row) { $('.videolisttble').children('tbody').append(row); }); } var f_sl = 1; var f_nm = 1; $(".matchhead").click(function () { f_sl *= -1; var n = $(this).prevall().length; sorttable(f_sl, n); }); $(".timehead").click(function () { f_nm *= -1; var n = $(this).prevall().length; sorttable(f_nm, n); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/jquery.datatables.min.js"></script> <link href="https://cdn.datatables.net/1.10.12/css/jquery.datatables.min.css" rel="stylesheet"/> <h2> before sorting</h2> <table class="table table-responsive videolisttble datatable no-footer" id="datatables_table_0"> <thead> <tr><th class="matchhead">match</th><th class="timehead">date & time</th><th> action</th></tr> </thead> <tbody> <tr class="manageiconswrap" role="row"> <td>d team vs team e</td> <td>tuesday march 15th, 2016, 05:00 pm</td> <td class="actioncont"> </td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">d team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team e</td> </tr> <tr class="manageiconswrap"> <td>c team vs team f</td> <td>sunday october 18th, 2015, 03:00 pm</td> <td class="actioncont"></td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">c team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team f</td> </tr> <tr class="manageiconswrap"> <td>a team vs team b</td> <td>sunday october 18th, 2015, 03:00 pm</td> <td class="actioncont"></td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">a team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team b</td> </tr> </tbody> </table> <h2> after sorting</h2> <table class="table table-responsive datatable no-footer" id="datatables_table_0"> <thead> <tr><th class="">match</th><th class="">date & time</th><th> action</th></tr> </thead> <tbody> <tr class="manageiconswrap"> <td>a team vs team b</td> <td>sunday october 18th, 2015, 03:00 pm</td> <td class="actioncont"></td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">a team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team b</td> </tr> <tr class="manageiconswrap"> <td>c team vs team f</td> <td>sunday october 18th, 2015, 03:00 pm</td> <td class="actioncont"></td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">c team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team f</td> </tr> <tr class="manageiconswrap" role="row"> <td>d team vs team e</td> <td>tuesday march 15th, 2016, 05:00 pm</td> <td class="actioncont"> </td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">d team</td> </tr> <tr class="donotsort"> <td colspan="3" style="display:none;"class="toggledropcont">team e</td> </tr> </tbody> </table>
because of nested tables function confused between tables rows , sort child table rows,to avoid have change selector target .videolisttble
direct rows.
use >
sign target direct child :
var rows = $('.videolisttble>tbody>tr').get();
hope helps.
Comments
Post a Comment