Dynamic Data In A Table Paginate, Filter, And Sort - TableSortable.js

byAdmin -January 12, 2023

0

Dynamic Data In A Table Paginate, Filter, And Sort

The jQuery Table Sortable plugin helps you render customizable dynamic data table from JSON or JavaScript objects, with beautiful data paginate, filtering, and sorting capabilities.

tableSortable.js is a super tiny (less than 1kb) table sorting library that helps create and reorder HTML tables with minimal effort. The library has no dependencies and comes with clean, semantically correct, vanilla JavaScript under the MIT license.

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);

Live Demo

See the Pen Dynamic Data Table Lightweight jQuery Plugin For Bootstrap 3 - Raytools.js by Plugin JS (@teguhsigit) on CodePen.

File Info

File Name :: table-sortable-master.zip
Size :: 333.27KB
Site Download :: Github.com
Official Website:: Go to website
License:: MIT

Dynamic Data In A Table Paginate, Filter, And Sort - TableSortable.js

How to use it:

Live Demo

File Info

File Download