使用jQuery对表行进行分页

Question

We are working with Customer Portal in Dynamics 365. I have to use a pagination plugin with existant data in the HTML table.

The current code:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

Here there are more than one hundred of records. I have to include a pagination area in the bottom to allow users to paginate the table.

While digging on internet I saw there are several plugins to achieve pagination but their data source are often an object array. Here I have to paginate specific rows ( <tr> ).

I have tried so far:

rows = [];
$('table:first tbody tr').each(function(i, row) {
    rows.push(row);
});
recordsPerPage = 20;
pages = Math.ceil(rows.length / recordsPerPage);

Before I write a bunch of lines I would like to know if someone knows about a plugin to paginate only what rows contain.

For example I could use plugin Pagination.js like the documentation says:

dataSource: function(done){
    var result = [];
    for (var i = 0; i < rows.length; i++) {
        result.push(rows[i]);
    }
    done(result);
}

Right?

Thanks in advance

Answer 1

After a lot of researching I found a posible solution with Pagination.js .

 let rows = [] $('table tbody tr').each(function(i, row) { return rows.push(row); }); $('#pagination').pagination({ dataSource: rows, pageSize: 1, callback: function(data, pagination) { $('tbody').html(data); } }) 

 table { border: 1px solid black; } th, td { border: 1px solid black; } td { padding: 5px; } #pagination { width: 100%; text-align: center; } #pagination ul li { display: inline; margin-left: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody id="data-container"> <tr> <td>Column 1: Row 1</td> <td>Column 2: Row 1</td> <td>Column 3: Row 1</td> <td>Column 4: Row 1</td> </tr> <tr> <td>Column 1: Row 2</td> <td>Column 2: Row 2</td> <td>Column 3: Row 2</td> <td>Column 4: Row 2</td> </tr> <tr> <td>Column 1: Row 3</td> <td>Column 2: Row 3</td> <td>Column 3: Row 3</td> <td>Column 4: Row 3</td> </tr> </tbody> </table> <div id="pagination"></div> 

Still, I don't make this work since the .pagination() method is not working even if loaded the script with $.getScript('url', function() {}); or document.createElement('script') but I think this is a different issue and post...