jquery - how to introduce pagination and sorting for a dynamic html table using javascript?

My html page contains ajax, which helps to create a table dynamically.

<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
  <tr>
    <th>Clients</th>
    <th>Number of Sites</th> 
    <th>Reset the Processing</th> 
  </tr>
  </table>
<script>
var myTable;

$(document).ready(function () {
    loadCustomers();
});


function loadCustomers() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getCustomers',
        dataType: 'json',
        success: function(data) {
            var rows = [];    
            $.each(data,function(id,value) {
                      rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
                    });
            $('#clients_data').append(rows.join(''));
        }
    });
};
</script>
</body>
</html>

At runtime, i may have 100s of rows populated in the table. How can I add pagination ,sorting fro this table using jquery?

My html page contains ajax, which helps to create a table dynamically.

<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
  <tr>
    <th>Clients</th>
    <th>Number of Sites</th> 
    <th>Reset the Processing</th> 
  </tr>
  </table>
<script>
var myTable;

$(document).ready(function () {
    loadCustomers();
});


function loadCustomers() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getCustomers',
        dataType: 'json',
        success: function(data) {
            var rows = [];    
            $.each(data,function(id,value) {
                      rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
                    });
            $('#clients_data').append(rows.join(''));
        }
    });
};
</script>
</body>
</html>

At runtime, i may have 100s of rows populated in the table. How can I add pagination ,sorting fro this table using jquery?

Share Improve this question asked Oct 16, 2017 at 3:28 Ratha 9,70218 gold badges97 silver badges177 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Here is a very basic example using jQuery each(), index(), toggle(), and an Anonymous function. I'm leveraging HTML 5 data-* attributes to keep track of my position and set the number of items to increase/decrease.

You can use plugins or write your own code to make pagination as simple or plex as you would like. Although I would strongly suggest using AJAX to populate your results, as loading 1000's of results to hide/show could potentially slow down a system.

/* Variable Defaults */
var total    = $('tbody > tr').length;
var position = $('tbody').data('position');
var jump     = $('tbody').data('jump');
var paginate = function(position, jump) {
    /* Show Default Items */
    $('tbody > tr').each(function() {
        /* Variable Defaults */
        var index = $(this).index();

        /* Condition */
        var condition = (index >= position) && (index < position + jump);

        /* Hide/Show Item */
        $(this).toggle(condition);

        /* Set Disabled Status */
        $('.less').prop('disabled', (position - jump) < 0);
        $('.more').prop('disabled', (position + jump) >= total);
    });
};

/* Set Default Text */
$('.count').text(jump);

/* Init Paginate */
paginate(position, jump);

/* Bind Click Events to "Less" and "More" Button */
$('.less, .more').on('click', function() {
    /* Decrease/Increase Position */
    position = $(this).hasClass('less') ? $('tbody').data('position') - jump : $('tbody').data('position') + jump;

    /* Paginate */
    paginate(position, jump);

    /* Update Position */
    $('tbody').data('position', position);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Email</td>
    </tr>
  </thead>
  <tbody data-position="0" data-jump="2">
    <tr>
      <td>1</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Test McTester</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

<button class="less">Back <span class="count">0</span></button>
<button class="more">Forwards <span class="count">0</span></button>

You can use Datatables for your purpose : https://datatables/examples/basic_init/alt_pagination.html

You can also use Tablesorter : http://tablesorter./docs/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - how to introduce pagination and sorting for a dynamic html table using javascript? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)