Question

如果我将pagination设置为5，而不是我要从所有页面按ascending或descending顺序对表中所有页面的数据进行排序，它只会从当前页面对数据进行排序。无论pagination是什么，我想解决这个问题，不仅来自sorted，表格的所有页面中的数据都会current page。这是Jsfiddle。

其次，如何将分页大小预设为5或10。请帮助我。

HTML文件

<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);
    }
}

点击Qty图片后所需的结果显示在

下方

点击Qty图片的当前结果显示在

下方

Answer 1

使用https://datatables.net/，这次不发明轮子。

无法对整个表中的数据进行排序

1 个答案: