Using jQuery CreateTable Plug-in to convert JSON into Table

How Do I? Explanation of jQuery Create Table Plug-in to convert JSON into table easily

Download Plug-in and sample
Download Asp.Net ajax sample and Plug-in

Template

{sr}	{Name}	{Mobile}	{isActive}
{sr}	{FirstName} {LastName}	{Mobile}	{isActive}
{Pager}

This is a complete template that contains a header, body and footer. It must have thead/tbody and tfoot for properly converting a table.

After creating a templat, get the data from server and pass it by using the following syntax

$("table").CreateTable({ Body: data });

That leads us to all available configuration and options. Here are the list of options that can be passed with their default values.

{ Head: null, Body: null, AjaxPager: false, CurrentPage: 0, TotalPages: 0, PageSize: 10, Pager: true,OnRow_Bounded:null,OnPager_Clicked:null }

To build a simple talbe only data is required and it automatically do the rest. But to use ajax pager that will be called on each page change and doing extra when data binding with each row requires more options to configure.

If You want to pass a function that will be called on each row creation, here is what you should you

$("table").CreateTable({ Body: data,OnRow_Bounded:yourCallBackFunction });

This function will be passed the row type (head,body) as first argument and the data that is being bounded to this row and the row (tr) itself. Here you can do special tasks like convert the bounded boolan to a checkbox as you can see in the below code

function OnRow_Bounded(rowData, row, rowType) 
{
    if (rowType == "body") 
    {
      var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
      $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);

    }
  return row;
}

Pager:

You can turn off pager by setting Pager:false.

Using ajax data source with pager.

Pager will generate next/previous according to total records and page size but it can be forsed to set as an Ajax pager. In this mode, total pages will be set in options along with ajax pager set to true as shown blow

$("table").CreateTable({ Body: null, TotalPages: 10, AjaxPager: true });

This will give an object that could be used to refresh table when a record is received. A sample is included in the download that shows how to do it in Asp.Net.

Exposed Object:

Var tble=$("table").CreateTable({ Body: null, TotalPages: 10, AjaxPager: true });

Gives an object of type Table that is created to build a table from template using the provided data. This object has the exposure to all the internal data and functions. Lets assume that you just want to change the data source but not the current page or anything else. This situation can be handled by simply using the following code

tble.Body= your new data source here;
tble.Refresh();

and here you go with your new data source.

Download Plug-in and sample
Download Asp.Net ajax sample and Plug-in