Create your own jquery table plugin _jquery

While imitating Easyui's DataGrid table plugin, it encapsulates one. The implementation of the basic JSON data dynamic loading, automatic paging, select all, the mouse suspension color, interlaced color, etc.

Because it involves AJAX access, you must deploy to IIS to see the effect, first show you the effect of the picture:

CSS Styles

* * CSS Document/body {font:14px/1.43 "Helvetica neue", Tahoma, "Microsoft Yahei", Arial;
 Color: #253443;
 margin:0 Auto;
padding:0 Auto;
 } table {border-collapse:collapse;
 border-spacing:0;
 Background: #FFF;
 font-size:12px;
 width:100%;
 border:1;
width:100%;
 } thead {display:table-header-group;
 Vertical-align:middle;
Border-color:inherit;
 } TR {display:table-row;
 Vertical-align:inherit;
Border-color:inherit;
 Table Thead TR {background-color: #E6F0FF;} table thead tr th {padding:5px 8px;
 Font-weight:normal;
 Color: #999;
 border-bottom:1px solid #B50802;
 Vertical-align:bottom;
line-height:20px;
 } tbody {display:table-row-group;
 Vertical-align:middle;
Border-color:inherit;
 } table tbody tr td {PADDING:8PX;
 border-top:0px;
 border-bottom:1px solid #DDD;
 Vertical-align:middle;
line-height:20px;
 } table tfoot tr td {width:100%;
 Background-color: #F4F4F4;
 height:20px;
 PADDING:8PX 0px;
Color: #000; } table Tfoot TR TD Input {width:30px;
Float:left;
 Table TFOOT tr TD span {Display:inline-block;
 Cursor:pointer;
 height:20px; padding:0
 10px;
Float:left;
 }. mouseover {background-color: #EAF2FF;
Color: #000; }

json file

{"Total": "Rows": [{"ID": 1, "name": "Public js and public CSS Style section", "Descrtion": "Describing public js and public CSS style sections", "Pri 
   CE ": 950}, {" ID ": 2," name ":" Custom attributes (e.g. skin style selection), "descrtion": "Description of custom attributes (e.g. skin style selection)," Price ": 5500 }, {"id": 3, "name": "Specific definition and Implementation section", "Descrtion": "Describe the specific definition and implementation section", "Price":}, {"id": 4, "name": "Opening part", "descrtion": "Description of the Open Door", "Price": 650}, {"ID": 5, "name": "Public js and public CSS Style section" , "Descrtion": "describes public js and public CSS style sections", "Price": 950}, {"ID": 6, "name": "matches all elements greater than the given index value", "Descrtio N ":" describes matching all elements that are greater than the given index value "," Price ": 5500}, {" ID ": 7," name ":" Find the second third row, the index value is 1 and 2, which is greater than 0 "," descrtion " 
    : "The description looks for the second third row, that is, the index value is 1 and 2, which is greater than 0", "Price": "E", {"ID": 8, "name": "Count from 0", "descrtion": "Count from 0", "Price": 650}, {"ID": 9, "name": "Public js and public CSS Style section", "Descrtion": "Describing public js and public CSS style sections", "Price": 950}, {"ID": "Name": "Custom attributes (e.g., skin style selection, etc.)", "descrtion": "Description of custom attributes (e.g. skin style selection)", "Price": 5500}, {"ID": 11,
    "Name": "Specific definition and Implementation section", "Descrtion": "Describe the specific definition and implementation section", "Price": "}, {" ID ":" "Name": "The opening part", "Descrtion": "Description of the Open Door", "Price": 650}, {"ID": "Name": "Public js and public CSS Style section", "Descrtion": "Describe public JS
    and public CSS Style section "," Price ": 950}, {" ID ":" Name ":" matches all elements greater than the given index value "," Descrtion ":" describes matching all elements greater than the given index value ", "Price": 5500}, {"ID": "Name": "Find the second third row, the index value is 1 and 2, that is, 0", "descrtion": "The description looks for the second third row, the index value is 1 and 2, also 
  Is bigger than 0 "," Price ":", {"ID": "Name": "Count from 0", "descrtion": "Count from 0", "Price": 650}
 ]
 }

jquery Code

JavaScript Document $ (function () {var dataGrid = function (Ele, opt) {This.defaults = {//id id: "",// Request URL Url:null,//table header format Columns:null,//Whether paging pagination:false,//whether the interlace color isoddcolor:false,/whether the search Cable bar Searchnation:false,//page display Pagesize:5,//page index PAGEINDEX:1,//Total pages Totalpage:null} This.setti
 NGS = $.extend ({}, this.defaults, opt);
   } Datagrid.prototype = {_id:null, _op:null, Init:function () {this._id=this.settings.id;
   _op=this;
   This.create ();
  This.bindevent (); }, Create:function () {//Initialize element this.
   Initializeelement ();
   Initialize table header This.createtablehead ();
   Initialize Dynamic row this.createtablebody (1);
   Initialize the search box//if (this.settings.searchnation) This.createsearchbox ();
  Select whether paging if (this.settings.pagination) this.createtablefoot ();
   }, Bindevent:function () {//Add the previous page event This.registeruppage ();
   Add Next Page Event This.registernextpage (); Add Home Event This.registerfirstpage ();
   Add last Page Event This.registerlastpage ();
   Add Jump event this.registerskippage ();
   Add Mouse hover event this.registermousehover ();
   Add the interlacing color This.registerchangebgcolor ();
  Add Select all optional event This.registercheckall ();
   },///Initialize element initializeelement:function () {//var id = this.settings.id; $ ("#" +this._id). Empty (). Append ("<thead><tr></tr></thead><tbody></tbody>
  <TFOOT></TFOOT> ");
   },///Loop Add header createtablehead:function () {var headcols = This.settings.columns; for (var i = 0; i < headcols.length i++) {if (Headcols[i].field = = ' CK ') $ ("table[id= '" + this._id + "] thead tr
    "). Append (" <th width= ' 50px ' ><input name= ' chkall ' type= ' checkbox ' ></th> ");  else $ ("table[id=" + this._id + "'] thead tr"). Append ("<th width=" + headcols[i].width + "align=" + headcols[i].align
   + ">" + headcols[i].title + "</th>"); },///Loop Add line createtablebody:function (PN) {var columns = _op.setTings.columns;
   var json = this.getajaxdate (_op.settings.url, NULL);
   Total number of pages = rounding up (total/per page) _op.settings.totalpage = Math.ceil ((json.total)/_op.settings.pagesize);
   Start Page var startpage = _op.settings.pagesize * (pn-1);
   End page var endpage = startpage + _op.settings.pagesize;
   var rowsdata = "";
    for (var row = StartPage Row < EndPage, row++) {if (row = = json.rows.length) break;
    Rowsdata = "<tr>"; for (var colindex = 0; Colindex < columns.length colindex++) {if (Columns[colindex].field = ' ck ') rowsdata + = ' &LT;TD width= "50px" align= "center" ><input name= "chk" type= "checkbox" ></td> ' else rowsdata + = ' <td W  Idth= ' + columns[colindex].width + ' align= ' + columns[colindex].align + ' > ' + Json.rows[row][columns[colindex].field]
    + ' </td> ';
   Rowsdata + = "</tr>";
   } $ ("table[id= '" + this._id + "'] tbody"). Empty (). append (Rowsdata);
   $ ("#currentpageIndex"). HTML (PN); This.registermouseHover ();
   },//Initialize paging createtablefoot:function () {var foothtml = "<tr><td>"; foothtml + + <span id= ' countpage ' > <font id= ' currentpageindex ' >1</font>/' + _op.settings.totalpage
   + "Page </span>";
   foothtml + = "<span id= ' firstpage ' > Home </span>";
   foothtml + = "<span id= ' uppage ' > Prev </span>";
   foothtml + + <span id= ' nextPage ' > next page </span>;
   foothtml + = "<span id= ' LastPage ' > Last </span>";
   foothtml + + <input type= ' text '/><span id= ' skippage ' > Jump </span> ';
   foothtml = "</td></tr>";
   $ ("table[id= '" + this._id + "'] tfoot"). Append (foothtml);
  $ ("table[id= '" + this._id + "'] tfoot tr TD"). attr ("colspan", "5"); ///Add mouse hover Event registermousehover:function () {//Add mouse hover Event $ ("table[id= ' + this._id +" '] tbody tr "). MouseOver (
   Function () {$ (this). addclass ("MouseOver");
   }). MouseLeave (function () {$ (this). Removeclass ("MouseOver");
  }); },//Add spacerRow discoloration Event Registerchangebgcolor:function () {//Add interlace Color if (this.settings.isoddcolor) $ ("table[id= '" + this._id + "]
  Tr:odd "). CSS (" Background-color "," #A77C7B "). CSS (" Color "," #fff "); },//Add registercheckall:function () {//Select all optional event $ ("Input[name= ' Chkall ']"). Click (function () {if
     (this.checked) {$ ("input[name= ' chk ']"). each (function () {$ (this). attr ("Checked", true);
    });
     else {$ ("input[name= ' chk ']"). each (function () {$ (this). attr ("checked", false);
    });
  }
   });
    ///Add First page event Registerfirstpage:function () {$ ("#firstPage"). Click (function () {_op.settings.pageindex = 1;
   _op.createtablebody (_op.settings.pageindex);
  }); ///Add the previous page event Registeruppage:function () {$ ("table"). Delegate ("#UpPage", "click", Function () {if (_op.se
     Ttings.pageindex = = 1) {alert ("Already the first page");
    Return
    } _op.settings.pageindex = _op.settings.pageindex-1; _op.createtablebody (_op.settiNgs.pageindex);
  }); ///Add Next Page Event Registernextpage:function () {$ ("table"). Delegate ("#nextPage", "click", Function () {if (_op
     . Settings.pageindex = = _op.settings.totalpage) {alert ("Already the last page");
    Return
    } _op.settings.pageindex = _op.settings.pageindex + 1;
   _op.createtablebody (_op.settings.pageindex);
  }); ///Add last Event Registerlastpage:function () {$ ("table"). Delegate ("#lastPage", "click", Function () {_op.set
    Tings.pageindex = _op.settings.totalpage;
   _op.createtablebody (_op.settings.totalpage);
  }); ///Add page Jump event Registerskippage:function () {$ ("table"). Delegate ("#skippage", "click", Function () {var va
    Lue = $ ("table[id= '" + this._id + "'] tfoot tr td input"). Val (); if (!isnan (parseint (value)) {if (parseint (value) <= _op.settings.totalpage) _op.createtablebody (parseint (value))
     ;
    Else alert ("Total pages exceeded");
   else alert ("Please enter a number");
  }); },//Add asynchronous Ajax event Getajaxdate:function (URL, parms) {//define a global variable to accept the $post return value var result;
     $.ajax with Ajax sync ({url:url, async:false,////Sync mode data:parms, success:function (data) {
    result = data;
   }
   });
  return result;
  } $.fn.grid = function (options) {var Grid = new DataGrid (this, options);
  Return This.each (function () {grid.init ();
 });
 }
})

HTML calls

 <!doctype html>  
 

This article is just to provide you with a framework, ideas, how to connect these knowledge points together, but also need everyone to study carefully, to create a own jquery form plug-ins.