
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.
- Publication date: 05.10.2018
- Source