Paginate, Sort, Filter Dynamic Data In A Table - Table Sortable

The Table Sortable jQuery plugin helps you render a customizable dynamic data table from JSON or JavaScript objects, with paginate, liver search, and data sort capabilities.

1. Import jQuery JavaScript library together with the JavaScript table-sortable.js and Stylesheet table-sortable.css into the document.

<link rel="stylesheet" href="table-sortable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="table-sortable.js"></script>

2. Create a container in which you want to render the data table.

<div id="myTable"></div>

3. Create a container to place the pagination controls.

<div class="pages"></div>

4. Create a search field to filter through the tabular data.

<input type="search" id="search">

5. Define your own tabular data and column names as follows.

var data = [
    {
        formCode: 531718,
        formName: 'Investment Form',
        fullName: 'Test User',
        appointmentDate: '13 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 531790,
        formName: 'Investment Form 2',
        fullName: 'Test User',
        appointmentDate: '12 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 531334,
        formName: 'Investment Form 3',
        fullName: 'Test User',
        appointmentDate: '10 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5317,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5318,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5319,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5320,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5321,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5322,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5323,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5324,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5325,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5326,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5327,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5328,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5329,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
]
var columns = {
    'formCode': 'Form Code',
    'formName': 'Form Name',
    'fullName': 'Full Name',
    'appointmentDate': 'Appointment Date',
    'appointmentTime': 'Appointment Time',
    'phone': 'Phone'
}

6. Initialize the plugin to render a data table on the page.

var TestData = {
    data: data,
    columns: columns
}
var table = $('#myTable').tableSortable({
    data: TestData.data,
    columns: TestData.columns,
    dateParsing: true,
    columnsHtml: function(value, key) {
      return value;
    },
    pagination: 5,
    showPaginationLabel: true,
    prevText: 'Prev',
    nextText: 'Next',
    searchField: $('#search'),
    responsive: [
      {
        maxWidth: 992,
        minWidth: 769,
        columns: TestData.col,
        pagination: true,
        paginationLength: 3
      },
      {
        maxWidth: 768,
        minWidth: 0,
        columns: TestData.colXS,
        pagination: true,
        paginationLength: 2
      }
    ]
})

7. All default options to customize the plugin.

var table = $('#root').tableSortable({
    data: [],  
    column: {},  
    sorting: true, // true/false/[array of columns]
    pagination: true, // true/false/Number true
    paginationContainer: null, // html-element/selector 
    paginationLength: 5,
    showPaginationLabel: true,
    processHtml: function(item, key, uniqueId) {}, 
    columnsHtml: function(item, key) {},
    searchField: null,
    responsive: [],
    dateParsing: true,
    generateUniqueIds: true,
    sortingIcons: {asc: '<span>▼</span>', dec: '<span>▲</span>' },
    nextText: '<span>Next</span>',
    prevText: '<span>Prev</span>'
})

This awesome jQuery plugin is developed by ravid7000. For more Advanced Usages, please check the demo page or visit the official website.