javascript - Arranging row text based on the header using boostrap or Jquery -
i have kind of table using boostrap. wanted sort them asc or desc after clicking header. search ordering , sorting in boostrap not thing want achieve. ordering moving things , sorting selecting , removing based on selection.
$('#header > div').on('click', function() { var $label = $(this).find('label'); // column number var $filter = $label.attr('data-name') == 'name' ? 1 : 2; // set toggle asc/desc flag var $sort = $label.attr('data-sort') || -1; $label.attr('data-sort', -$sort); $sort = -$sort; $('#header').nextall('.row').sort(function(a, b) { var c = $(a).find('div:nth-child(' + $filter + ') label').text(); var d = $(b).find('div:nth-child(' + $filter + ') label').text(); if ($filter === 1) { // filter strings if (c == d) return 0; else if (c > d) return 1 * $sort; else if (c < d) return -1 * $sort; } else { // filter numbers return (+c - +d) * $sort; } }).insertafter($('#header')); }); // initial sorting $('#header > div:first-child').trigger('click')<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <div class="row " id="header"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small" data-name="name" data-filtering="true">name</label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small" data-name="id" data-filtering="true">id</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">a </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">4</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">b </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">3</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">c </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">2</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">d </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">1</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues ">total </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small id"></label></h6> </div> </div>is there function on how achieve goal.
goal
when clicking on name should make row arrange d or d same number well.
i use data binding plugins angular.js here solution using jquery:
first column number target
name,idcolumnsnext set / ascending or descending flag on column
now user
sort()rows , append them dom.
see demo below:
$('#header > div').on('click', function() { var $label = $(this).find('label'); // column number var $filter = $label.attr('data-name') == 'name' ? 1 : 2; // set toggle asc/desc flag var $sort = $label.attr('data-sort') || -1; $label.attr('data-sort', -$sort); $sort = -$sort; $('#header').nextuntil('#total').sort(function(a, b) { var c = $(a).find('div:nth-child(' + $filter + ') label').text(); var d = $(b).find('div:nth-child(' + $filter + ') label').text(); if ($filter === 1) { // filter strings if (c == d) return 0; else if (c > d) return 1 * $sort; else if (c < d) return -1 * $sort; } else { // filter numbers return (+c - +d) * $sort; } }).insertafter($('#header')); }); // initial sorting $('#header > div:first-child').trigger('click')<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <div class="row " id="header"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small" data-name="name" data-filtering="true">name</label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small" data-name="id" data-filtering="true">id</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">a </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">4</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">b </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">12</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">c </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">2</label></h6> </div> </div> <div class="row"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues fullname">d </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues id">1</label></h6> </div> </div> <div class="row" id="total"> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small newvalues ">total </label></h6> </div> <div class="col-xs-1 table-bordered text-sm-center"> <h6><label class="col-form-label small id"></label></h6> </div> </div>
Comments
Post a Comment