jQuery easyUI use datagrid table

Obtaining background data is still using a general processor (ashx), was added a function (pagerFilter (data)) on the tab

Front-end code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/themes/icon.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="easyui/jquery.min.js"></script>
    <script src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/shine.js"></script>
    <script type="text/javascript">  
        $(function () {  
            $('#dg').datagrid({
                url:'ashx/GetDataFormSql.ashx',  
                width: 800,   
                Title: ' equipment management ' ,   
                Method: ' GET ' ,   
                Columns: [[   
                    {Field: ' adminName ' , title: ' login ' , width: 300 }, 
                    {Field: ' trueName ' , title: ' username ' , width: 300 }, 
                    {Field: ' mobilephone ' , title: ' phone ', width: 200 }
                ]],  
                pagination: true,  
                pageSize:1,  
                pageList:[1,2,3]  
            })  
        })
        function pagerFilter(data) {
            if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array  
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

        $(function () {
            $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData());
        });
    </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table id="dg"></table>  
    </div>
    </form>
</body>
</html>

Background Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data; 
using System.Text;

namespace Web.Management.ashx
{
    /// <summary>
    /// GetDataFormSql 的摘要说明
    /// </summary>
    public class GetDataFormSql : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {

            string command = context.Request.QueryString["test"];//前台传的标示值    
            IF (the Command == " the Add " ) 
            { // call the Add method    
                 // the Add (context); // I just temporary binding, so these comments to the   
            }
             the else  IF (the Command == " the Modify " ) 
            { // call modification method    
                 // the modify (context); // I just temporary binding, so these comments to the   
            }
             the else 
            { // call query method     
                query (context); 
            }   
           
        } 
        public  voidQuery (the HttpContext context) 
        { 
            // method call B layer to obtain the database Dataset     
            the DataSet DS = BRL.BLL.A_admin.GetAllList ();
             // a Dataset into datable     
            the DataTable ds.Tables dt = [ 0 ];
             int COUNT = dt.Rows.Count;
             String strJson = Dataset2Json (DS, COUNT); // the DataSet data into data Json     
            context.Response.Write (strJson); // return to the front page     
            context.Response.End (); 

        } 

        public  static  String Dataset2Json (the DataSet DS, int Total = -1)
        {
            StringBuilder json = new StringBuilder();

            foreach (DataTable dt in ds.Tables)
            {
                //{"total":5,"rows":[  
                json.Append("{\"total\":");
                if (total == -1)
                {
                    json.Append(dt.Rows.Count);
                }
                else
                {
                    json.Append(total);
                }
                json.Append(",\"rows\":[");
                json.Append(DataTable2Json(dt));
                json.Append("]}");
            }
            return json.ToString();
        }

        public static string DataTable2Json(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }

            return jsonBuilder.ToString();
        }  
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

       
    }
    
}

jQuery easyUI use datagrid table

Guess you like