/* 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;}

{   "total":16,  "rows": [   {    "ID": 1,    "name": "公共js和公共css樣式部分",    "descrtion":"描述公共js和公共css樣式部分",    "Price": 950   },   {    "ID": 2,    "name": "自定義特性（如：皮膚風格選擇等）部分",    "descrtion":"描述自定義特性（如：皮膚風格選擇等）",    "Price": 5500   },    {      "ID": 3,    "name": "具體定義及實現部分",    "descrtion":"描述具體定義及實現部分",    "Price": 150   },   {    "ID": 4,    "name": "對外開放部分",    "descrtion":"描述對外開放部分",    "Price": 650   },   {    "ID": 5,    "name": "公共js和公共css樣式部分",    "descrtion":"描述公共js和公共css樣式部分",    "Price": 950   },   {    "ID": 6,    "name": "匹配所有大于給定索引值的元素",    "descrtion":"描述匹配所有大于給定索引值的元素",    "Price": 5500   },    {      "ID": 7,    "name": "查找第二第三行，即索引值是1和2，也就是比0大",    "descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大",    "Price": 150   },   {    "ID": 8,    "name": "從 0 開始計數",    "descrtion":"從 0 開始計數",    "Price": 650   },    {    "ID": 9,    "name": "公共js和公共css樣式部分",    "descrtion":"描述公共js和公共css樣式部分",    "Price": 950   },   {    "ID": 10,    "name": "自定義特性（如：皮膚風格選擇等）部分",    "descrtion":"描述自定義特性（如：皮膚風格選擇等）",    "Price": 5500   },    {      "ID": 11,    "name": "具體定義及實現部分",    "descrtion":"描述具體定義及實現部分",    "Price": 150   },   {    "ID": 12,    "name": "對外開放部分",    "descrtion":"描述對外開放部分",    "Price": 650   },   {    "ID": 13,    "name": "公共js和公共css樣式部分",    "descrtion":"描述公共js和公共css樣式部分",    "Price": 950   },   {    "ID": 14,    "name": "匹配所有大于給定索引值的元素",    "descrtion":"描述匹配所有大于給定索引值的元素",    "Price": 5500   },    {      "ID": 15,    "name": "查找第二第三行，即索引值是1和2，也就是比0大",    "descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大",    "Price": 150   },   {    "ID": 16,    "name": "從 0 開始計數",    "descrtion":"從 0 開始計數",    "Price": 650   }  ] }

// JavaScript Document$(function () { var dataGrid = function (ele, opt) {  this.defaults = {   //id   id: "",   //請求url   url: null,   //表頭格式   columns: null,   //是否分頁   pagination: false,   //是否隔行變色   isoddcolor: false,   //是否搜索欄   searchnation:false,   //頁顯示   pagesize: 5,   //頁索引   pageindex: 1,   //總頁數   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 () {   //初始化元素   this.InitializeElement();   //初始化表頭   this.createTableHead();   //初始化動態行   this.createTableBody(1);   //初始化搜索框   //if(this.settings.searchnation) this.createsearchbox();   //選擇是否分頁   if (this.settings.pagination) this.createTableFoot();  },  bindEvent: function () {   //添加上一頁事件   this.registerUpPage();   //添加下一頁事件   this.registerNextPage();   //添加首頁事件   this.registerFirstPage();   //添加最后一頁事件   this.registerlastPage();   //添加跳轉事件   this.registerSkipPage();   //添加鼠標懸浮事件   this.registermousehover();   //添加隔行變色   this.registerchangebgcolor();   //添加全選全不選事件   this.registercheckall();  },  //初始化元素  InitializeElement: function () {   //var id = this.settings.id;   $("#"+this._id).empty().append("<thead><tr></tr></thead><tbody></tbody><TFOOT></TFOOT>");  },  //循環添加表頭  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>");   }  },  //循環添加行  createTableBody: function (pn) {   var columns = _op.settings.columns;   var json = this.getAjaxDate( _op.settings.url, null);   //總頁數=向上取整(總數/每頁數)    _op.settings.totalpage = Math.ceil((json.total) / _op.settings.pagesize);   //開始頁數   var startPage = _op.settings.pagesize * (pn - 1);   //結束頁數   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 += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'     else rowsdata += '<td width=' + 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();  },  //初始化分頁  createTableFoot: function () {   var footHtml = "<tr><td>";   footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + _op.settings.totalpage + "頁</span>";   footHtml += "<span id='firstPage'>首頁</span>";   footHtml += "<span id='UpPage'>上一頁</span>";   footHtml += "<span id='nextPage'>下一頁</span>";   footHtml += "<span id='lastPage'>末頁</span>";   footHtml += "<input type='text'/><span id='skippage'>跳轉</span>";   footHtml += "</td></tr>";   $("table[id='" + this._id + "'] tfoot").append(footHtml);   $("table[id='" + this._id + "'] tfoot tr td").attr("colspan", "5");  },  //添加鼠標懸浮事件  registermousehover: function () {   //添加鼠標懸浮事件   $("table[id='" + this._id + "'] tbody tr").mouseover(function () {    $(this).addClass("mouseover");   }).mouseleave(function () {    $(this).removeClass("mouseover");   });  },  //添加隔行變色事件  registerchangebgcolor: function () {   //添加隔行變色   if (this.settings.isoddcolor) $("table[id='" + this._id + "'] tr:odd").css("background-color", "#A77C7B").css("color", "#fff");  },  //添加全選全不選事件  registercheckall: function () {   //添加全選全不選事件   $("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);     });    }   });  },  //添加首頁事件  registerFirstPage: function () {   $("#firstPage").click(function(){    _op.settings.pageindex = 1;    _op.createTableBody( _op.settings.pageindex);   });  },  //添加上一頁事件  registerUpPage: function () {   $("table").delegate("#UpPage", "click",   function () {    if ( _op.settings.pageindex == 1) {     alert("已經是第一頁了");     return;    }    _op.settings.pageindex = _op.settings.pageindex - 1;    _op.createTableBody(_op.settings.pageindex);   });  },  //添加下一頁事件  registerNextPage: function () {   $("table").delegate("#nextPage", "click",   function () {    if (_op.settings.pageindex == _op.settings.totalpage) {     alert("已經是最后一頁了");     return;    }    _op.settings.pageindex = _op.settings.pageindex + 1;    _op.createTableBody(_op.settings.pageindex);   });  },  //添加尾頁事件  registerlastPage: function () {   $("table").delegate("#lastPage", "click",   function () {     _op.settings.pageindex = _op.settings.totalpage;    _op.createTableBody( _op.settings.totalpage);   });  },  //添加頁數跳轉事件  registerSkipPage: function () {   $("table").delegate("#skippage", "click",   function () {    var value = $("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("超出頁總數");    } else alert("請輸入數字");   });  },  //添加異步ajax事件  getAjaxDate: function (url, parms) {   //定義一個全局變量來接受$post的返回值   var result;   //用ajax的同步方式   $.ajax({    url: url,    async: false,    //改為同步方式    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();  }); }})

<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><script src="jquery-1.8.0.min.js"></script><link rel="stylesheet" type="text/css" href="style.css"><script src="pagetion.js"></script><script type="text/javascript">$(function(){ $("#dg").grid({   id:"dg",   url:"data.json",   columns: [       {field:'ck',checkbox:true},       { field: 'ID', title: '編號', width:100, align: 'center'},       { field: 'name', title: '名稱', width: 150, align: 'left' },       { field: 'descrtion', title: '描述', width: 350, align: 'left' },       { field: 'Price', title: '價格', width: 100, align: 'left' }      ],   isoddcolor:false,   pagination:true,   searchnation:true,    pagesize:5  }); });</script></head><body><form id="form1"> <table id="dg"> </table></form></body></html>