How to implement different types of paging?

BradleyO07

I am currently working on a piece of code that displays a weekly total table in the corner of my page. I can see all the data fine but the page buttons below doesn't fit completely on the page. I am wondering how can I change the page button layout so it show on my web page.

Currently this is how my code is set up:

function getTable() {
  $.ajax({
    url: '../ajax/resin/ResinTable.ajax.copy.php',
    type: 'post',
    data: {"getTable": 1},
    dataType: 'json',
    success: function(response) {
      var tableRows = "";
      for(i = 0; i < response.length; i++){
        tableRows += '<tr>' +
                          '<td>' + response[i].recipe + '</td>' +
                          '<td>' + response[i].stage + '</td>' +
                          '<td>' + response[i].itemnum + '</td>' +
                          '<td>' + response[i].unitnum + '</td>' +
                      '</tr>';
      }
      document.getElementById('totalTableBody').innerHTML = tableRows;
      document.getElementById('totalTableMediumBody').innerHTML = tableRows;
    }
  });
}

What can I add to this to allow for a different paging layout?

allan

Can you show me a screenshot of what you mean please?

Thanks,
Allan

BradleyO07

BradleyO07

@allan Above is the screenshot, if you look on the left you will see that the previous button is cut off.

kthorngren

You can find some paging plugins here that might work for you.

Kevin

allan

You could set the pagingType option to be numbers perhaps? That would tidy up the left column.

Allan