Lightweight Dynamic Data Table Plugin For Bootstrap - jQuery Raytable
File Size: | 70.9 KB |
---|---|
Views Total: | 13748 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Raytable is a lightweight yet feature-rich jQuery data table / data grid plugin styling with the popular Bootstrap framework. Features paging, row sorting and has the ability to interact with the tabular by clicking on a row or an action button you specify.
Basic usage:
1. Load the necessary jQuery library and Bootstrap framework in the html document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Download and load the Raytable plugin's file raydreams
after jQuery.
<script src="raydreams.js"></script>
3. Create a DIV container for the generated data table.
<div id="dataTable" class="table table-striped table-bordered"> <!--<thead> <tr> <th data-ray-field="firstName">First Name</th> <th data-ray-field="lasName">Last Name</th> <th data-ray-field="gender">Gender</th> <th data-ray-field="email">Email</th> <th data-ray-field="title">Title</th> <th data-ray-field="city">City</th> </tr> </thead>--> </div>
4. Prepare your data to be rendered in the data table.
var myData =[ { "id":"1", "firstName":"Darnall", "lastName":"Eakeley", "title":"Research Assistant I", "grade":8, "ssn":"313-24-2493", "birthDate":"1995-03-22T20:42:15Z" }, { "id":"2", "firstName":"Nollie", "lastName":"Poli", "title":"Electrical Engineer", "grade":3, "ssn":"539-37-8776", "birthDate":"1988-09-28T20:24:37Z" }, ... ]
5. The JavaScript to generate the data table.
jQuery("#dataTable").raytable({ data: myData columns: [ { title: "Info", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager }, { field: "firstName", title: "First Name", sort:true }, { field: "lastName", title: "Last Name", sort: true }, { field: "title", title: "Title" }, { field: "grade", title: "Grade", sort: true }, { field: "ssn", title: "SSN" }, { field: "birthDate", title: "DOB", sort: true, format: parseDate }, { title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] } ] });
6. All possible options to customize the data table.
jQuery("#dataTable").raytable({ // data - the actual data to render // keyfield - the object property to use to identify each unique row object datasource: { data: [], keyfield: null }, // field - the field name. // title - column headers // icons - (optional) An arary of Glyph icons to display in the column // - glyph - the glyph's CSS class name from the Bootstrap 3 glyphicons // - handler - (optional) a callback to handle clicking on the icon // data - (optional) Additional data // sort - (optional, default is false) set to true to allowing sorting // renderIf - (optional) a callback function with the signature (item)->bool, where item is the object bound to that row, that returns whether to even render the contents of the cell at all. This can be use to skip cell icons based on some condition. // format - (optional) a callback function with the signature (item)->string, where item is the object bound to that row, that returns a format string to display in that cell, such as formatting dates. columns: [field, title, icons, sort, renderIf, format], // page size pageSize: 25, // max number of pagination buttons maxPageButtons: 5, // current page index currentPageIdx: 0, // the base HTML element parentElem: null, // shows line numbers rowNumbers: true, // the current field and direction of sorting currentSort: null, // last clicked row currentSelection: null, // external handler when a row is clicked onRowClick: null });
7. Load the data manually.
var myTable = jQuery("#dataTable").raytable(); myTable.data(myData,'id');
Changelog:
2021-01-30
- Updated for Bootstrap 4+
2018-11-29
- Bug fix in the page conntroller
2018-03-22
- bug fix with the cell width
2018-03-14
- Fixed paging.
2018-03-13
- Added maxPagerSize option
This awesome jQuery plugin is developed by GrumpyCockatiel. For more Advanced Usages, please check the demo page or visit the official website.