Developing a DataTable Paging table plugin using jquery

When the system data volume is very large, the front-end paging, asynchronous access is a better solution. All along, I want to use the jquery plugin I developed to do the system.

Now, after learning the jquery plug-in development, and gradually also try to develop some simple plug-ins, has developed the accordion, tab, today and you introduce this DataTable page table plug-in.

We will first explain the use, and then analyze the implementation of plug-ins.

1. Introduction of jquery library and plugin library, CSS file

First, we need to introduce the jquery library, because our DataTable plugin relies on another paging plug-in, all need to first introduce this paging plugin library, and finally introduce the DataTable plugin JS and CSS files

1 <Scripttype= "Text/javascript"src= "Js/jquery/jquery-1.7.2.min.js"></Script>2 3 <Scripttype= "Text/javascript"src= "Js/pagination.js"></Script>4 <Linkrel= "stylesheet"href= "Css/blue/pagination.css"/>5 6 <Scripttype= "Text/javascript"src= "Js/datatable.js"></Script>7 <Linkrel= "stylesheet"href= "Css/blue/datatable.css"/>

2, plug-in use

Below we will introduce how to use the plugin.

First, we need to write a table tag, in fact, the most important code is only the 5th row of the table label, the previous button is to see the plug-in interaction.

1 <Buttonclass= "Default-button"onclick= "update ();">Modify</Button>2 <Buttonclass= "Default-button"onclick= "Del ();">Delete</Button>3 <Buttonclass= "Default-button"onclick= "reload ();">Refresh</Button>4 5 <TableID= "First-datatable"></Table>

Then we need to write a script script to initialize the DataTable component and load the page data.

1$ ("#first-datatable"). DataTable ({2Width: "1000",3Height: "Auto",4 columns: [5{field: "id", ColumnName: "Number", CSS: {"text-align": "Center" } },6{field: "username", ColumnName: "User name" },7{field: "Age", ColumnName: "Ages" },8{field: "Phone", ColumnName: "Contact Phone", css: {"text-align": "Center" } },9{field: "Email", ColumnName: "Mailbox" },Ten{field: "description", ColumnName: "Self-Introduction" } One     ], AURL: "/jq-ui/ajax/admin_json.jsp", -Pagenum:1,//Show page data, default 1 -Pagesize:15,//number of data per page, default ten thePagination:true,//whether paging components are enabled, enabled by default -ShowCheckBox:true -});

Let's take a brief look at the parameters:

Width: A div that wraps the table label, you can not set the value of this parameter, the default 100% is the width of the parent element

Height: A div that wraps the table label, the default auto

Columns: is a object[] object that defines column information for the table, including column name, field key, CSS style

URL: Gets the remote address of the asynchronous data

Pagenum: Display the first page of data when initializing

PageSize: How much data is displayed per page

Pagination: Whether paging components are enabled

ShowCheckBox: Whether to display the check box at the beginning of the line, which is used when data selection is required

The background code is not in this introduction, if necessary to download the plug-in project code. The background returns a JSON data that should include the maximum number of pages, data collection information, as follows:

　　

Now, you can see the effect of the plugin:

　　

3, plug-in implementation and core functions

When the plug-in is initialized, the thead and the header are generated first, then a div is wrapped outside the table, and then the data is fetched from the parameter configuration URL parameter and loaded into the tbody of the table. In this procedure, the check box and pagination component of the beginning of the line are determined by the parameters. Page plug-in We do not focus on the description, the code in the DataTable plugin is as follows:

1 if(options["Pagination"]) {2     //Delete the previous paging component first3$datatable. Parent (). Find (". Pagination")). Remove ();4     //define a div to display the paging component5     var$pagination = $ ("<div></div>"). CSS ("Margin-top", "10px");6     //initializing the paging component7 $pagination. Pagination ({8pagenum:options["Pagenum"],9size:options["PageSize"],Tentotal:data["Totalpage"], OneClick:function(Curr, s) { Aoptions["Pagenum"] =Curr; -$.data ( This, "DataTable", options); - LoadData ($datatable); the             returndata["Totalpage"]; -         } -     }); -     //append a paging component to a DataTable component + $datatable. Parent (). append ($pagination); -}

To facilitate user access to data and refresh tables, the plugin provides two functions:

　　

4. Refresh, get

Let's briefly describe how to use the reload and getselectrows functions

To delete a button's event function:

1 /*2 * Delete function3  */4 functiondel (tid) {5     varrows = $ ("#" + tid). DataTable ("Getselectrows");6     if(Rows.length < 1) {7Alert ("Please select at least one piece of data");8         return;9     }Ten     varids =NewArray (); One      for(vari = 0; i < rows.length; i++) { A         varid = rows[i]["id"]; - Ids.push (ID); -     } the Console.log (IDS); - $.ajax ({ -Type: "POST", -DataType: "JSON", +Data: {"IDs": IDs}, -Traditional:true, +URL: "/jq-ui/ajax/admin_del.jsp", ASuccessfunction(data) { at             if(data["RetCode"] = = ' 0 ') { -Alert ("Delete succeeded"); -$ ("#" + tid). DataTable ("Reload"); -             } -         } -     }); in}

The Update button has a similar event function, which is no longer repeated.

To refresh the button's event function:

1 /* 2 * Click "Refresh" to call the DataTable's reload function to reload the data 3  */ 4 function Reload (id) {5     $ ("#" + ID). DataTable ("Reload"); 6 }

5. Project Address

Datatable.js Http://5ijy01.duapp.com/jq-ui/js/datatable.js

Datatable.css Http://5ijy01.duapp.com/jq-ui/css/blue/datatable.css

Demo Project in http://5ijy01.duapp.com/jq-ui/index.html

GitHub Project in Https://github.com/xuguofeng/jq-ui

Developing a DataTable Paging table plugin using jquery