jrPaginator - HTML Table Pagination Plugin with jQuery and PHP

• Download source code - 16.8 KB

Introduction

This is a simple jQuery plug in to paginate the large HTML table that you can specify the number of rows, custom table head and can select columns to show per page. It is compatible with the set of PHP and MySQLi database server.

Using the plug in

1. Download jrPaginator plug in.
2. Add jrPaginator.min.css & jrPaginator.min.js to your project.
3. Edit jrPaginationHandler.php (set the database details) and place it at your preferred location.
4. Initialize the jrPaginate for the table you want to paginate as below:
   JavaScript

   $(document).ready(function(){
       $('#yourTableId').jrPaginate({
           dbTableName: 'yourDbTableName',
           filePath: 'pathOfPHPFile'
           //optional parameters
       });
   });

   Example:

   JavaScript

   $(document).ready(function(){
       $('#contact-list').jrPaginate({
           dbTableName: 'contact_list',
           filePath: 'assets/user/contacts/jrPaginationHandler.php' 
           //optional parameters
       });
   });

5. Parameters

   • dbTableName ^_Compulsory

     Name of the mysql database table.
     Example:
   • JavaScript

     dbTableName: 'contact_list'

   • filePath ^_Compulsory

     Path of jrPaginationHandler.php, you can place it at your preferred location. You can also change the file name or you can copy paste the code from this file to another PHP file, just care the $link variable which holds the mysqli connection. Example:
   • JavaScript

     filePath: 'assets/user/contacts/jrPaginationHandler.php<sup><sub>?</sub></sup>

   • tableHead

     Provide your own custom table head row. Example:
   • JavaScript

     tableHead : '<tr><th>Id</th><th>Name</th><th>Email</th><th>Contact</th><th>Address</th></tr>'

   • columnList

     List of columns you want to fetch from the database table.
   • JavaScript

     columnList: {a: 'id', b: 'name', c: 'contact', d: 'email'}

   • listLength

     Length of list, i.e., number of rows you want to display at a time in the table:
   • JavaScript

     listLength: 15      //Default is 20

   • showPageBtn

     Number of page buttons you want to display at a time:
   • JavaScript

     showPageBtn: 4      //Default is 5

   • showLastPage

     User cannot see the number of total pages if set to 'false':
   • JavaScript

     showLastPage: false      //Default is 'true'

   • rowAddOn

     This parameter can be used to add any new common data column in the rows that is not in the database table, such as delete or edit button.
   • JavaScript

     rowAddOn: '<td><input type="button" value="Delete" onclick="delete(this);"></td>'

6. Full Fledged Example
   JavaScript

   $(document).ready(function(){
       $('#entity-list').jrPaginate({
           dbTableName     :   'pagination_test',
           filePath    :   'src/jrPaginationHandler.php',
           listLength  :   5,
           showPageBtn :   4,
           rowAddOn    :   '<td><input type='button'
           value='delete'></td>',
           tableHead   :   '<tr><th>id</th>
           <th>name</th><th>contact</th>
           <th>email</th></tr>',
           columnList  :   {a : 'id', b : 'name',
           c : 'contact', d : 'email'},
           showLastPage:   true
       });
   });
   

Points to Remember

• Don't forget to add jQuery library
• It is mandatory to give a unique 'id' to each HTML table

Demo

Visit the demo page to see the live demo of jrPaginator.

Snapshots

More Tips

The design of buttons can be customised using the below classes:

• jr-top-btn

  To edit the numbered buttons

• jr-scroll-btn-left & jr-scroll-btn-left

  To edit the left and right buttons

• jr-focus

  To edit the current page button

If you have variable table names for database table (Example: Each user has a different table name for the activity log), you can edit jrPaginationHandler.php.

Example:

//default code
$tableName=$_POST['dbTableName'];

//change it to  
$tableName= 'yourTableName'; //Ex: $_SESSION['user_id'].'_log'