Create your own jquery table plug-in and jquery table plug-in

Create your own jquery table plug-in and jquery table plug-in

While imitating the dataGrid table plug-in of easyui, You can encapsulate one by yourself. Supports dynamic loading of basic json data, automatic paging, full selection, mouse suspension, and line-based discoloration.

Because ajax access is involved, you must deploy it on iis to see the effect. Let's take a look:

Css style

/* 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": 16, "rows": [{"ID": 1, "name": "Public js and public css style sections", "descrtion ": "Description of Public js and public css styles", "Price": 950 },{ "ID": 2, "name": "custom features (such: "," descrtion ":" describes custom features (for example, skin style selection) "," Price ": 5500 },{" ID ": 3, "name": "definition and implementation", "descrtion": "Description definition and implementation", "Price": 150 },{ "ID ": 4, "name": "Open part", "descrtion": "Description OPEN part", "Price": 650 },{ "ID": 5, "name": "Public js and public css styles", "descrtion": "Description of Public js and public css styles", "Price": 950 }, {"ID": 6, "name": "match all elements greater than the given index value", "descrtion": "describe matches all elements greater than the given index value ", "Price": 5500}, {"ID": 7, "name": "Search for the third row, that is, the index value is 1 and 2, that is, it is larger than 0 ", "descrtion": "Description searches for the second and third rows, that is, the index values are 1 and 2, that is, greater than 0", "Price": 150 },{ "ID": 8, "name": "count from 0", "descrtion": "count from 0", "Price": 650 },{ "ID": 9, "name ": "Public js and public css style section", "descrtion": "Description public js and public css style section", "Price": 950 },{ "ID": 10, "name": "custom features (such as skin style selection)", "descrtion": "describe custom features (such as skin style selection )", "Price": 5500 },{ "ID": 11, "name": "definition and implementation", "descrtion": "Description definition and implementation ", "Price": 150 },{ "ID": 12, "name": "Open part", "descrtion": "Open part", "Price ": 650 },{ "ID": 13, "name": "common js and common css Styles section", "descrtion": "common js and common css Styles section ", "Price": 950 },{ "ID": 14, "name": "matches all elements greater than the given index value", "descrtion ": "description matches all elements greater than the given index value", "Price": 5500 },{ "ID": 15, "name": "Search for the second and third row, that is, the index values are 1 and 2, that is, greater than 0. "," descrtion ":" describes the second and third rows of search, that is, the index values are 1 and 2, that is, it is bigger than 0. "," Price ": 150}, {" ID ": 16," name ":" count from 0 "," descrtion ": "counting from 0", "Price": 650}]}

Jquery code

// JavaScript Document $ (function () {var dataGrid = function (ele, opt) {this. defaults = {// id: "", // request url: null, // The Header Format is columns: null, // whether pagination: false, // whether the row is discolored isoddcolor: false, // whether the searchnation: false in the search bar, // pagesize: 5 on the page, // pageindex: 1 on the page, // the total number of pages totalpage: null} this. settings = $. 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 the element this. initializeElement (); // initialize the header this. createTableHead (); // initialize the dynamic line this. createTableBody (1); // initialize the search box // if (this. settings. searchnation) this. createsearchbox (); // select whether to pagination if (this. settings. pagination) this. createTableFoot ();}, bindEvent: function () {// Add the previous page event this. registerUpPage (); // Add a next page event This. registerNextPage (); // Add the Home Page event this. registerFirstPage (); // Add the last page event this. registerlastPage (); // Add a jump event this. registerSkipPage (); // Add the mouse suspension event this. registermousehover (); // Add the barrier to change color this. registerchangebgcolor (); // Add all selected events. this. registercheckall () ;}, // initialization element InitializeElement: function () {// var id = this. settings. id; $ ("#" + this. _ id ). empty (). append ("<thead> <tr> </thead> <tbody> </tbody> <TFOOT> </TF OOT> ") ;}, // cyclically Add the header createTableHead: function () {var headcols = this. settings. columns; for (var I = 0; I 
Html call

<! Doctype html> 
This article only provides a framework and train of thought for you. To link these knowledge points together, you also need to study carefully and create your own jquery table plug-in.