javascript - Table sorting issue on hidden row -


example fiddle

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 &amp; 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 &amp; 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>

working fiddle

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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -