2013-7-16关于jquery.datatable插件从数据库读取数据

最新推荐文章于 2022-08-15 20:33:45 发布

转载最新推荐文章于 2022-08-15 20:33:45 发布 · 144 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuq23/p/3193782.html

本文介绍如何将数据库内容通过JSON格式传递给jQuery DataTable插件。主要步骤包括配置sAjaxSource参数指向提供JSON数据的URL，该URL返回的数据格式可以是数组或对象的集合，并附带了一个将数据库表转换为JSON格式的示例方法。

研究了两天，一直没弄明白如何把数据库中的内容传入jquery.datatable，这里做个笔记，以便日后查阅。

首先，安装jquery什么的不说了，从服务器端读取数据需要使用到datatable插件的sAjaxSource这个参数，给出下面代码示例：

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var oTable = $('#example').dataTable({
            "bProcessing": true,
            "sAjaxSource": "Handler1.ashx",
            "aoColumns": [
                { "mData": "id" },
                { "mData": "name" },
                { "mData": "address" },
            ]
        });    
　　});
</script>

先不管其他参数，"sAjaxSource"的参数格式是一段url，指向某个文件，这个文件提供的是一种名为Json的数据，他可以是数组的集合，也可以是对象的集合，格式是这样的：

json数组的集合：

{"aaData":[

　　["id1","name1","..."],

　　["id2","name2","..."],

]}

json对象的集合：

{"aaData":[

　　{"id":"id1","name":"name1","...":"..."},

　　{"id":"id2","name":"name2","...":"..."},

]}

其中"aaData"是json数据的键值，datatable插件定义的属性。

从数据库中我们把读取到的表填充到DataSet对象中，那么我们就可以写一个方法，把从数据库中读到的表转化成json数据的格式，参考代码如下：

public static string DataTableToJson(DataTable dt)
        {
            StringBuilder json = new StringBuilder();
            json.Append("{\"");
            json.Append("aaData");
            json.Append("\":[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                json.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    json.Append("\"");
                    json.Append(dt.Columns[j].ColumnName);
                    json.Append("\":\"");
                    json.Append(dt.Rows[i][j].ToString());
                    json.Append("\",");
                }
                json.Remove(json.Length - 1, 1);
                json.Append("},");
            }
            json.Remove(json.Length - 1, 1);
            json.Append("]");
            json.Append("}");
            return json.ToString();
        }

现在回到刚开始所说的"sAjaxSource"这个参数，获取数据的url指向的Handle1.ashx文件的功能就是输出一段json格式的数据，Handle1.ashx文件中的代码如下：

public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string json = DataTableToObjects.DataTableToJson(getJson());
            context.Response.Write(json);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        public static DataTable getJson()
        {
            string constr = "Data Source = .;Integrated Security = SSPI;Initial Catalog = ajax"; 
            using (SqlConnection conn = new SqlConnection(constr))
            {
                string sqlstr = "select * from parkinfo";
                DataSet ds = new DataSet();
                SqlDataAdapter da = new SqlDataAdapter();
                da.SelectCommand = new SqlCommand(sqlstr, conn);
                da.Fill(ds);
                DataTable dt = ds.Tables[0];
                return dt;
            }
            
        }
    }