A feature-rich Data Table Generator with jQuery and JSON – Tabulator




easy-data-table-generator-with-jquery-json-tabulator

Here we will share you a feature-rich Data Table Generator with jQuery and JSON – Tabulator. The jQuery plugin used for generating simple or complex data tables from any JSON data, with the following additional features:

  • JSON, array or AJAX data loading
  • Resizable columns
  • Auto scaling to fit data/element
  • Column sorting
  • Custom data formatting
  • Many theming options
  • Custom click and context Events
  • Callbacks at every stage of data processing and rendering
  • Data filtering.

How to use it:

1. Load the necessary jQuery and jQuery UI libraries in the html page.

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Just load the jQuery Tabulator plugin after jQuery library and we’re ready to go.

<script src="tabulator.js"></script>

3. Generate a simple data table inside the container ‘demo’ from the JSON data you specify during initialization.

$("#demo").tabulator({
 columns:[
 {title:"Name", field:"name", width:200},
 {title:"Age", field:"age"},
 {title:"Gender", field:"gender"},
 {title:"Height", field:"height", width:80},
 {title:"Favourite Color", field:"col"},
 {title:"Date Of Birth", field:"dob"},
 {title:"Likes Cheese", field:"cheese"},
 ],
});

4. Default plugin options.

//minimum global width for a column
colMinWidth:"40px", 

//resizable columns
colResizable:true, 

//height of tabulator
height:false, 

//fit colums to width of screen;
fitColumns:false, 

//enable movable columns
movableCols:false, 

//enable movable rows
movableRows:false, 

//handle for movable rows
movableRowHandle:"<div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:3px;'></div><div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:2px;'></div><div style='margin:0 10%; width:80%; height:3px; background:#666; margin-top:2px;'></div>", 

//store cookie with column _styles
columnLayoutCookie:false, 

//id for stored cookie
columnLayoutCookieID:"", 

//enable pagination
pagination:false, 

//size of pages
paginationSize:false, 

//paginate internal or via ajax
paginationAjax:false, 

//element to hold pagination numbers
paginationElement:false, 

//enable progressive rendering
progressiveRender:true, 

//block size for progressive rendering
progressiveRenderSize:200, 

//time between renders
progressiveRenderPeriod:100, 

//Tool tip value
tooltips: false, 

//Tool tip for headers
tooltipsHeader: false, 

//stor for colum header info
columns:[],

//store for initial table data if set at construction
data:false, 

index:"id",

//global default for sorting
sortable:true, 

//<a href="http://www.jqueryscript.net/time-clock/">date</a> format to be used for sorting
dateFormat: "dd/mm/yyyy", 

//defualt column to sort by
sortBy:"id", 

//default sort direction
sortDir:"desc", 

//enable table grouping and set field to group by
groupBy:false, 

//header layout function
groupHeader:function(value, count, data){ 
 return value + "<span style='color:#d00; margin-left:10px;'>(" + count + " item)</span>";
},

//color for edit boxes
editBoxColor:"#1D68CD", 

//row formatter
rowFormatter:false, 

//position to insert blank rows, top|bottom
addRowPos:"bottom", 

//highlight rows on hover
selectable:true, 

//url for ajax loading
ajaxURL:false, 

//url for ajax loading
ajaxParams:{}, 

//show loader while data loading
showLoader:true, 

//loader element
loader:"<div class='tabulator-loading'>Loading Data</div>",

//loader element
loaderError:"<div class='tabulator-error'>Loading Error</div>",

5. Callback functions.

//do action on row click
rowClick:function(){}, 

//do action on row add
rowAdded:function(){}, 

//do action on row edit
rowEdit:function(){}, 

//do action on row delete
rowDelete:function(){}, 

//context menu action
rowContext:function(){}, 

//callback for when data has been Loaded
dataLoaded:function(){}, 

//callback for when row has moved
rowMoved:function(){}, 

//callback for when column has moved
colMoved:function(){}, 

//calback for when a page is loaded
pageLoaded:function(){},

6. Global settings for jQuery UI widget.

//array to hold data for table
data:[],

//array to hold data that is active in the DOM
activeData:[],

//layout table widths correctly on first render
firstRender:true, 

//mouse drag tracker;
mouseDrag:false, 

//starting width of colum on mouse drag
mouseDragWidth:false, 

//column being dragged
mouseDragElement:false, 

//catch to prevent mouseup on col drag triggering click on sort
mouseDragOut:false, 

//column name of currently sorted column
sortCurCol:null,

//column name of currently sorted column
sortCurDir:null,

//field to be filtered on data render
filterField:null, 

//value to match on filter
filterValue:null, 

//filter type
filterType:null, 

//pagination page
paginationCurrentPage:1, 

//pagination maxpage
paginationMaxPage:1, 

//timer for progressiver rendering
progressiveRenderTimer:null, 

//loader blockout div
loaderDiv: $("<div class='tablulator-loader'><div class='tabulator-loader-msg'></div></div>"), 


7. Events.

  • dataLoading: Data is being loaded (from string, array or AJAX source)
  • dataLoadError: There is has been an error loading data from an AJAX source
  • renderStarted: Table is has started to render
  • renderComplete: Table is has finished being rendered
  • sortStarted: Table has started sorting
  • sortComplete: Table has finished sorting
  • filterStarted: Table Filter has started
  • filterComplete: Filter has been applied to table

Leave a Reply

Your email address will not be published. Required fields are marked *