Paginate, Filter, And Sort 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, live filter, and data sort capabilities.

How to use it:

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="jquery.slim.min.js"></script>
<script src="table-sortable.js"></script>

2. Create a search filed that can be used to filter your table.

<input type="text" placeholder="Search in table..." id="searchField">
<div class="table-sortable">
  Table will be rendered here
</div>

3. 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'
}

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

var table = $('#table-sortable').tableSortable({
    data: data,
    columns: columns,
    rowsPerPage: 5,
    pagination: true
});

5. Enables a dropdown to select the number of table rows to show per page.

<select name="rowsPerPage" id="changeRows">
  <option value="1">1</option>
  <option value="5" selected>5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

$('#changeRows').on('change', function() {
  table.updateRowsPerPage(parseInt($(this).val(), 10));
})

6. Update data with Ajax.

var table = $('#table-sortable').tableSortable({
    data: [],
    columns: columns,
    rowsPerPage: 10,
    pagination: true,
});

$.get(/* url */, function(data) {
    // Push data into existing data
    table.setData(data, null, true);

    // or Set new data on table, columns is optional.
    table.setData(data, columns);
})

7. Enable/disable sorting on all columns or specific column.

var table = $('#table-sortable').tableSortable({
    ...
    sorting: true,
    ...
});

/* or on specific columns */

var table = $('#table-sortable').tableSortable({
    ...
    sorting: ['column1', 'column2'],
    ...
});

8. Render different table based on viewport width. It takes max-width as viewport value.

var table = $('#table-sortable').tableSortable({
    ...
    responsive: {
        // It works for 571 - 1100 viewport width; (max-width: 1100px and min-width: 571px);
        1100: {
            // Other options
            columns: {
                formCode: 'Form Code',
                formName: 'Form Name',
            },
        },
        // It works for 0 - 570 viewport width; (max-width: 570px);
        570: {
            // Other options
            columns: {
                formName: 'Form Name',
            },
        }
    },
    ...
});

9. All default options to customize the plugin.

var table = $('#root').tableSortable({
    element: '',
    data: [],
    columns: {},
    sorting: true,
    pagination: true,
    paginationContainer: null,
    rowsPerPage: 10,
    formatCell: null,
    formatHeader: null,
    searchField: null, // selector of search field
    responsive: {}, // specify options for different screen sizes
    totalPages: 0,
    sortingIcons: {
        asc: '<span>▼</span>',
        desc: '<span>▲</span>',
    },
    nextText: '<span>Next</span>',
    prevText: '<span>Prev</span>',
    tableWillMount: () => {},
    tableDidMount: () => {},
    tableWillUpdate: () => {},
    tableDidUpdate: () => {},
    tableWillUnmount: () => {},
    tableDidUnmount: () => {},
    onPaginationChange: null,
})

10. API methods.

// It will update the table, if you have updated options they will be applied.
table.refresh(); 

// It will distroy and create table from start.
table.refresh(true); 

// Destroy the table.
table.distroy();

// Get table data.
table.getData();

// Set new data and columns on table
table.setData(data, columns /* optional */);

// Add data in existing data
table.setData(partialData, null, true);

// Get data on the current page
table.getCurrentPageData();

// Update rows per page dynamically. 
table.updateRowsPerPage(20);

Changelog:

v2.0.3 (2020-12-13)

• Bugs fixed

2020-02-17

• Added Search field and lookup for filter

2020-02-11

• v2.1

2020-02-11

• v2 stable
• Doc update
• Demo update

---

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