BootStrap-table 在asp.net中的应用

最新推荐文章于 2021-12-16 09:16:50 发布

怎一个强字了得

最新推荐文章于 2021-12-16 09:16:50 发布

阅读量3.6k

点赞数

分类专栏：分页文章标签： asp.net bootstrap table 分页存储过程

本文链接：https://blog.csdn.net/qq237183141/article/details/78337512

版权

分页专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前台UI：

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
</head>
<body>
    <table id="table"></table>
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-success">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-info">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-warning">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <script src="scripts/jquery-1.11.1.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    </body>
</html>

json动态绘制表格

  $('#table').bootstrapTable({
            url: "test.ashx",
            cache: false,//是否使用缓存
            method: "post",
            toolbar: "#toolbar",
            showRefresh: true,//刷新按钮
            sortStable: true,//是否支持排序
            contentType: "application/x-www-form-urlencoded",//post请求必须要有，否则后台接受不到参数
            pagination: true,//是否显示分页
            sidePagination: "server",//设置在服务端还是客户端分页
            pageNumber: 1,//首页页码，默认为1
            pageSize: 10,//页面数据条数,默认为10
            search: true,//是够有搜索框
            clickToSelect: true,//点击是否选中行
            queryParamsType: "",
            queryParams: function (params) {
                return {
                    pageSize: params.pageSize,//pageSize
                    pageNumber: params.pageNumber,//偏移量
                    sortName: params.sortName,//以哪个字段排序
                    sortOrder: params.sortOrder,//降序还是升序,asc,desc
                    searchText: params.searchText//搜索关键字
                };
            },
            formatLoadingMessage: function () {
                return "请稍后，正在加载....";
            },
            formatNoMatches: function () {
                return "暂无匹配数据.";
            },
            columns: [{
                field: "select",
                title: "全选",
                checkbox:true,
            }, {
                field: 'LAB_NO',
                title: '实验室账号',
                sortable:true
            }, {
                field: 'LAB_NAME',
                title: '实验室名称'
            }, {
                field: 'PHONE',
                title: '手机号'
            }, {
                field: 'MAIL',
                title: '邮箱'
            }, {
                field: 'CONTACT',
                title: '联系人'
            }, {
                field: 'USER_FUNC',
                title: '用户权限'
            }]
        });

后台一般处理程序

  /// <summary>
    /// 测试调用bootstrap分页
    /// </summary>
    public class test : IHttpHandler
    {

        SQLDatabase db = new SQLDatabase();
        private int pageSize = 10;//一页显示的数据
        private int pageNumber = 1;//页码
        private string sortName = "";//排序字段
        private string sortOrder = "1";//asc or desc
        private string searchText = "";//关键字

        public void ProcessRequest(HttpContext context)
        {
            if (!string.IsNullOrEmpty(context.Request["pageSize"]))
                pageSize = Convert.ToInt32(context.Request["pageSize"]);

            if (!string.IsNullOrEmpty(context.Request["pageNumber"]))
                pageNumber = Convert.ToInt32(context.Request["pageNumber"]);

            if (!string.IsNullOrEmpty(context.Request["sortName"]))
                sortName = (context.Request["sortName"]);

            if (!string.IsNullOrEmpty(context.Request["sortOrder"]))
            {
                sortOrder = (context.Request["sortOrder"]);
                if (sortOrder == "asc")
                    sortOrder = "1";
                else if (sortOrder == "desc")
                    sortOrder = "0";
            }
            string strWhere = "";
            if (!string.IsNullOrEmpty(context.Request["searchText"]))
            {
                searchText = (context.Request["searchText"]);
                strWhere += string.Format(" (user_no like '%{0}%' or user_name like '%{0}%')", searchText);
            }

            string json = LoadTableByPagination("tb_user", "*", pageNumber, pageSize,Convert.ToInt32(sortOrder), strWhere, "user_no");
            context.Response.Write(json);
            context.Response.End();

        }

        /// <summary>
        /// 调用分页储存过程，返回table的json数据
        /// </summary>
        /// <param name="table">数据库表名</param>
        /// <param name="fields">查询的字段</param>
        /// <param name="pageNumber">当前页码</param>
        /// <param name="pageSize">一页显示的数据</param>
        /// <param name="orderSort">0降序，1升序</param>
        /// <param name="strWhere">查询条件</param>
        /// <param name="orderName">排序字段</param>
        /// <returns></returns>
        string LoadTableByPagination(string table,string fields,int pageNumber,int pageSize,int orderSort,string strWhere,string orderName )
        {
            string json = "";
            SqlParameter[] parameters = {new SqlParameter("@TABLE",SqlDbType.VarChar,50),
                new SqlParameter("@FEILDS",SqlDbType.VarChar,1000),
                new SqlParameter("@PAGE_INDEX",SqlDbType.Int,4),
                new SqlParameter("@PAGE_SIZE",SqlDbType.Int,4),
                 new SqlParameter("@ORDERTYPE",SqlDbType.Bit),
                  new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),
                  new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100)
            };
            parameters[0].Value = table;//表格
            parameters[1].Value = fields;//字段
            parameters[2].Value = pageNumber;
            parameters[3].Value = pageSize;
            parameters[4].Value = orderSort;//0是降序，1是升序
            parameters[5].Value = strWhere;//条件
            parameters[6].Value = orderName;//排序字段
            DataSet dataSet = db.RunProcDataSet("pagination", parameters);
            if (dataSet != null)
            {
                DataTable dt = dataSet.Tables[0];
                //后台返回的json数据必须包含total，和rows属性，否则前台没数据
                if (dataSet.Tables[1] != null && dataSet.Tables[1].Rows.Count > 0)
                    json += "{\"total\":" + dataSet.Tables[1].Rows[0]["total"] + ",";
                if (dt != null & dt.Rows.Count > 0)
                    json += "\"rows\":" + DataTableToJson(dt) + "}";
            }
            return json;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        #region Json&DataTable
        /// <summary> 
        /// DataTable转为json 
        /// </summary> 
        /// <param name="dt">DataTable</param> 
        /// <returns>json数据</returns> 
        public static string DataTableToJson(DataTable dt)
        {
            List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
            foreach (DataRow dr in dt.Rows)
            {
                Dictionary<string, object> result = new Dictionary<string, object>();
                foreach (DataColumn dc in dt.Columns)
                {
                    result.Add(dc.ColumnName, dr[dc]);
                }
                list.Add(result);
            }
            int recursionLimit = 100;
            JavaScriptSerializer serialize = new JavaScriptSerializer();
            serialize.RecursionLimit = recursionLimit;
            serialize.MaxJsonLength = Int32.MaxValue;
            return serialize.Serialize(list);
        }
        #endregion Json&DataTable
    }

Sql Server 存储过程

/*数据分页*/
CREATE PROCEDURE [dbo].[PAGINATION] 
@TABLE varchar(50),--数据库表名
@FEILDS  VARCHAR(1000),--要显示的字段
@PAGE_INDEX INT,--当前页码
@PAGE_SIZE INT,--页面大小
@ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc
@ANDWHERE VARCHAR(1000)='',--where语句 不用加where
@ORDERFEILD VARCHAR(100) --排序的字段
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
    set NOCOUNT on
    IF @ORDERTYPE = 1 
        BEGIN
            SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])'
            SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC'
        END
    ELSE 
        BEGIN
            SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])'
            SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC'
        END

    IF @PAGE_INDEX = 1 --当页码是第一页时直接运行，提高速度
        BEGIN
            IF @ANDWHERE=''
                SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] '+@ORDERBY
            ELSE
                SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+ @ORDERBY
        END
    ELSE
        BEGIN
            IF @ANDWHERE=''
                BEGIN      --以子查询结果当做新表时 要给表名别名才能用
                    SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
                                @ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
                                ' FROM ['+@TABLE+'] '+@ORDERBY+') AS TEMP) '+ @ORDERBY
                END
            ELSE
                BEGIN
                    SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
                                @ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
                                ' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY
                END
        END
--获取table的总行数
 IF @ANDWHERE=''
        set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] '
else
        set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] WHERE '+@ANDWHERE
EXEC (@EXECSQL)--这里要加括号
END
GO

官方文档接口：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

怎一个强字了得

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-table 在asp.net中的应用

BootStrap-table 在asp.net中的应用前台UI：<head> <meta charset="utf-8" /> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="//cdnjs.cloudflare.c
复制链接

扫一扫