Dynamic Data Table Lightweight jQuery Plugin For Bootstrap 3 - Raytools.js

Dynamic Data Table Lightweight jQuery Plugin For Bootstrap 3
Dynamic Data Table Lightweight jQuery Plugin For Bootstrap 3

Raytools.js is a lightweight but feature-rich jQuery data dynamic table/data grid plugin style with the popular Bootstrap framework. Features paging, row sorting and having the ability to interact with the tabular by clicking the row or 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');

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 :
raytools-master.zip
Size :
121.43KB
Site Download :
Github.com
Official Website:
Go to website
License:
MIT
Previous Post Next Post