Paginate Table Rows With 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:

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

#paginationulli {
  display: inline;
  margin-left: 10px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><tbodyid="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><divid="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...

JavaScript Gen

Paginate Table Rows With Jquery

Solution 1:

Post a Comment for "Paginate Table Rows With Jquery"