kann nicht die Daten aus ganzem Tisch

Question

sortieren Wenn ich die pagination-5 gesetzt, als ich bin unbale die Daten von allen Seiten der Tabelle von allen Seiten in ascending oder descending Reihenfolge zu sortieren, wird die Daten von Strom nur sortieren Seite. Ich möchte dies beheben, was auch immer die pagination ist, werden die Daten sorted von allen Seiten der Tabelle nicht nur von current page. Die Jsfiddle davon ist das.

Zweitens, wie die Größe der Seitennummerierung auf 5 oder 10 voreingestellt wird. Bitte hilf mir bitte.

HTML FILE

<div style="margin-top:35px;"> 
     <h4>Per Page:</h4> 
     <div class="form-group"> 
      <select name="state" id="maxRows" class="form-control" style="width: 150px;"> 
      <option value="500">Pagination</option> 
      <option value="5">5</option>  
      <option value="10">10</option> 
      <option value="15">15</option> 
      <option value="20">20</option> 
      <option value="50">50</option> 
      <option value="100">100</option> 
      <option value="100">500</option> 
      <option value="100">1000</option>  
      </select> 
      </div> 

<table id="mytable" class="table table-hover table-bordered results"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th class="col-md-5 col-xs-5">Name</th> 
     <th class="col-md-4 col-xs-4">Qty</th> 

    </tr> 
    </thead> 
    <tbody id="my" data-link="row" class="rowlink"> 
    <tr><td>1</td><td>A</td><td>10</td></tr> 
    <tr><td>2</td><td>B</td><td>10</td></tr> 
    <tr><td>3</td><td>C</td><td>12</td></tr> 
    <tr><td>4</td><td>D</td><td>10</td></tr> 
    <tr><td>5</td><td>E</td><td>15</td></tr> 
    <tr><td>6</td><td>F</td><td>10</td></tr> 
    <tr><td>7</td><td>G</td><td>30</td></tr> 
    <tr><td>8</td><td>H</td><td>50</td></tr> 
    <tr><td>9</td><td>I</td><td>10</td></tr> 
    <tr><td>10</td><td>J</td><td>90</td></tr> 
    <tr><td>11</td><td>K</td><td>20</td></tr> 
    <tr><td>12</td><td>L</td><td>10</td></tr> 

     <tbody> 

     </tbody> 
</table> 
    <div class="pagination-container col-md-6"> 
     <nav> 
      <ul class="pagination"></ul> 
     </nav> 
    </div> 

SCRIPT

//for pagination 


    var table = '#mytable' 
    $('#maxRows').on('change', function(){ 
     $('.pagination').html('') 
     var trnum = 0 
     var maxRows = parseInt($(this).val()) 
     var totalRows = $(table+' tbody tr').length 
     $(table+' tr:gt(0)').each(function(){ 
      trnum++ 
      if(trnum > maxRows){ 
       $(this).hide() 
      } 
      if(trnum <= maxRows){ 
       $(this).show() 
      } 
     }) 
     if(totalRows > maxRows){ 
      var pagenum = Math.ceil(totalRows/maxRows) 
      for(var i=1;i<=pagenum;){ 
       $('.pagination').append('<li data-page="'+i+'">\<span>'+ i++ +'<span class="sr-only">(current)</span></span>\</li>').show() 
      } 
     } 
     $('.pagination li:first-child').addClass('active') 
       $('.pagination li').on('click',function(){ 
       var pagenum = $(this).attr('data-page') 
       var trIndex = 0; 
        $('.pagination li').removeClass('active') 
        $(this).addClass('active') 
        $(table+' tr:gt(0)').each(function(){ 
        trIndex++ 
        if(trIndex > (maxRows*pagenum) || trIndex <= ((maxRows*pagenum)-maxRows)){ 
         $(this).hide() 
        }else{ 
         $(this).show() 
        } 
        }) 
       })        
    }); 

    //for sorting per page 

$(document).ready(function() { 


    $("th").click(function() { 
    sortTable($("#mytable"), $(this)); 
    }); 


}); 


function sortTable(table, th) { 
    var rows = $(table).find("tr:gt(0)").toArray().sort(compare($(th).index())); 

    if ($(th).hasClass("ascending")) { 
     $(th).removeClass("ascending").addClass("descending"); 
     rows = rows.reverse(); 
    } 
    else { 
     $(th).removeClass("descending").addClass("ascending"); 
    } 

    for (var i = 0; i < rows.length; i++) { 
     $(table).append(rows[i]); 
    } 

    evenify($(table).attr("id")); 
} 

function compare(index) { 
    return function(a, b) { 
     var valA = $(a).children("td").eq(index).html(); 
     var valB = $(b).children("td").eq(index).html(); 
     return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB); 
    } 
} 

auf Ihr gewünschte Ergebnis Qty Bild klicken unterhalb

angebracht

Mein aktuelles Ergebnis auf Qty Bild klicken angebracht unten

Answer 1

Verwenden https://datatables.net/, nicht ein Rad dieses Mal erfinden.