Member Avatar for gcardonav

I found this jQuery Plugin online. The plugin is exactly what I need and I want to add it to my page but my table is created by obtaining the elements from a db. I tried adding it to the page as the jsFiddle sample but pagination just does not show. The only change I am making to the jsFiddle code is the instead of breaking the pages every tbody element I want it to break it every tr element. Here is the code for the table, any suggestion is welcomed.

var columns = ["username", "user_id", "address", "state", "postal_code", "phone", "email"];  
var level_classes = {
 "NEW": "new_client",
 "RENEWAL": "renewing_client",
 "CURRENT": "current_client"
};
$(document).ready(function() {
 $.getJSON("obtainUsers.php", function(data) {
    var $table = $('<table style="width: 100%;">');
    var $tbody = $('<tbody>');
    $table.append($tbody);
    var $tr = null;

    data.forEach(function(user, index) {
        if (index % 4 === 0) {
            $tr = $('<tr>');
            $tbody.append($tr);
        }
        $td = $('<td class="' + level_classes[user.level] + '">');
        columns.forEach(function(col) {
            $td.append(user[col]);
            $td.append($('<br>'));
        });
        $tr.append($td);
    });
    $('.runninglist').append($table);
 });
});

I have never used a plugin before, so any suggestions will be greatly appreciated.

Thank you

  • 2 Contributors
  • 3 Replies
  • 601 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short answer: most table-pagers expect a consistent “page” element (many plugins use one <tbody> per page). If you build a single <tbody> full of <tr> rows and the plugin looks for child <tbody> blocks, it will not produce controls. Before changing plugin code, confirm whether the plugin has an option to treat each row as an item; if it does not, build the markup the plugin expects and initialize the plugin after the table is in the DOM.

A simple, robust approach is to split your generated rows into tbodies (one tbody = one page). Example pattern (build HTML strings, then append):

var rowsPerPage = 4;
var $table = $('<table class="users"><thead><tr><th>User</th><th>Email</th></tr></thead></table>');

var rows = data.map(function(u){
  // simple escaping to avoid accidental HTML injection
  function esc(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
  return '<tr><td>' + esc(u.username) + '</td><td>' + esc(u.email) + '</td></tr>';
});

for (var i = 0; i < rows.length; i += rowsPerPage) {
  $table.append('<tbody>' + rows.slice(i, i + rowsPerPage).join('') + '</tbody>');
}

$('.runninglist').append($table);
// initialize the pagination plugin here (after append)

Quick checklist (debugging tips):

  • Make sure jQuery is loaded before the plugin script, and both are loaded before you call the plugin.
  • Initialize the plugin after you append the table to the page (inside the getJSON callback).
  • Inspect the DOM and plugin source: look for what selector the plugin uses (does it search for tbody?). Use console.log($table.children('tbody').length) to verify pages were created.
  • Check for CSS hiding the pager elements (use devtools to find the pager nodes).
  • If a row-level pager is mandatory and the plugin has no such option, either wrap rows into tbodies as above or pick a plugin designed for row-level pagination.

's point about markup and including the JS files is spot on — start by verifying those two things, then adjust your generated HTML to match what the plugin expects.

Recommended Answers

All 3 Replies

Member Avatar for gcardonav

@diafol, what did you do, you made a change in the HTML but is the Javascript where I am failing.

Member Avatar for Member #120589

You had a link to a fiddle. I thought it was relevant. Also you said you wanted to show just one <tr> element at a time from your table. That's what I did.

The fiddle you supplied was a little squiffy as it had multiple tbodies not sure if that's semantic, but certainly looks odd.

You'll notice I also changed the js, not simply take out the tbody tags - which should give you a clue as to how to implement it in your example.

If your pagination doesn't show, there could be a number of reasons. You don't show where you include the js files in your opening snippet.

Where is the info that you supply to the plug-in? i.e. the element(s) that you pass to it?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.