How can I create a pagination of a json displayed data?

Question

Good morning,

Today I'm trying to make a live search PHP+MySQL+Json program in my website and sometimes it's difficult because I don't know a lot of Json code.

URL: http://bdebeauty.es/index.php?option=com_jumi&view=application&fileid=14&Itemid=258

I'm displaying the table with the information with the following code:

<script>

  function makeTable(data){
   var tbl_body = "";
      $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k,v)
        {
            tbl_row += "<td>"+v+"</td>";
        })
        tbl_body += "<tr>"+tbl_row+"</tr>";         
      })


    return tbl_body;
  }

  function getEmployeeFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
      }
    });

    return opts;
  }

  function updateEmployees(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(records){
        $('#employees tbody').html(makeTable(records));
      // here, after the content is inside DOM/visible we activate the plugin
        $('#employees').dataTable({
            "paging":   true,
            "ordering": false,
            "info":     false
        });
      }
    });
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
  });

  updateEmployees();
</script>

The problem is that I need to limit the results and having a "pagination", because at the moment it's showing a lot of entries and the scroll is heavy.

How can I do that?

Thanks, much appreciated.

Regards.

Answer 1

This is not a problem about json, you just need a tool for display your table. I used this awsome plugin for jquery. It supports pagination, ordering, filtering, num. of entries per page. It's really simple to use and configure:

1. add these to your page:

2. create your table as you are doing right now with full result set, remember thead and tfoot

activate the plugin on this table with:

$(document).ready(function() {
    $('#example').dataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false
    } );
} );

UPDATE: After you call makeTable() you have to display this table by putting it inside an element like , only now you can activate the plugin.

function updateEmployees(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(records){
        $('#employees tbody').html(makeTable(records));
      // here, after the content is inside DOM/visible we activate the plugin
        $('#employees').dataTable({
            "paging":   true,
            "ordering": true,
            "info":     true
        });
      }
    });
  }

!Important Remember to write the full table with thead and tbody tags like here