ASP.NET中使用Bootstrap-Table显示后台数据

最近需要使用Bootstrap-Table显示后台数据,经过一番摸索后终于成功,下面分享一下代码:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bootstrap Tabletitle>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js">script>
    <script src="lib/bootstrap/js/bootstrap.min.js">script>
    <script src="lib/bootstrap-table/bootstrap-table.min.js">script>
    <script src="lib/bootstrap-table/locale/bootstrap-table-zh-CN.js">script>
head>
<body>
    <div style="margin-left:100px;margin-top:100px;width:1200px;">
        <div id="toolbar" class="btn-group">
            <button id="add" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true">span>新增
            button>
            <button id="edit" type="button" class="btn btn-info">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true">span>修改
            button>
            <button id="delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true">span>删除
            button>
        div>
        <table id="table">table>
    div>

    <script>
        $(document).ready(function () {
            $('#table').bootstrapTable({
                url: "ashx/LoadDataHandler.ashx",                      // URL
                method: "post",                                        // 请求类型
                contentType: "application/x-www-form-urlencoded",      // post请求必须要有,否则后台接受不到参数
                toolbar: "#toolbar",                                   // 工具条
                sidePagination: "server",                              // 设置在服务端还是客户端分页
                showRefresh: true,                                     // 是否刷新按钮
                sortStable: true,                                      // 是否支持排序
                cache: false,                                          // 是否使用缓存
                pagination: true,                                      // 是否显示分页
                search: true,                                          // 是否有搜索框
                clickToSelect: true,                                   // 是否点击选中行
                pageNumber: 1,                                         // 首页页码,默认为1
                pageSize: 10,                                          // 页面数据条数
                pageList: [10, 20, 30],
                queryParamsType: "",
                queryParams: function (params) {
                    return {
                        pageSize: params.pageSize,                     // 每页记录条数
                        pageNumber: params.pageNumber,                 // 当前页索引
                        sortName: params.sortName,                     // 排序字段名称
                        sortOrder: params.sortOrder,                   // 降序还是升序
                        searchText: params.searchText                  // 搜索关键字
                    };
                },
                formatLoadingMessage: function () {
                    return "请稍后,正在加载....";
                },
                formatNoMatches: function () {
                    return "暂无匹配数据.";
                },
                columns: [{
                    field: "select",
                    title: "全选",
                    align: "center",
                    halign: "center",
                    checkbox: true,
                },
                {
                    field: 'Id',
                    title: '编号',
                    align: "center",
                    halign: "center",
                    sortable: true
                },
                {
                    field: 'Name',
                    title: '姓名',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'Gender',
                    title: '性别',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'Age',
                    title: '年龄',
                    align: "center",
                    halign: "center"
                },
                {
                    field: 'PhoneNumber',
                    title: '手机号',
                    align: "center",
                    halign: "center"
                }]
            })
        });
    script>
body>
html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.ashx
{
    /// 
    /// LoadDataHandler 的摘要说明
    /// 
    public class LoadDataHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 获取参数
            int pageSize = int.Parse(context.Request["pageSize"].ToString());
            int pageNumber = int.Parse(context.Request["pageNumber"].ToString());

            // 模拟数据
            List<Person> list = new List<Person>();
            list.Add(new Person() { Id = 1, Name = "AAAA", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 2, Name = "BBBB", Gender = "女", Age = 23, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 3, Name = "CCCC", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 4, Name = "DDDD", Gender = "女", Age = 24, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 5, Name = "EEEE", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 6, Name = "FFFF", Gender = "女", Age = 32, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 7, Name = "GGGG", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 8, Name = "HHHH", Gender = "女", Age = 26, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 9, Name = "IIII", Gender = "男", Age = 28, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 10, Name = "JJJJ", Gender = "女", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 11, Name = "KKKK", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 12, Name = "LLLL", Gender = "女", Age = 92, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 13, Name = "MMMM", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 14, Name = "NNNN", Gender = "女", Age = 42, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 15, Name = "OOOO", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 16, Name = "PPPP", Gender = "女", Age = 52, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 17, Name = "QQQQ", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 18, Name = "RRRR", Gender = "女", Age = 62, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 19, Name = "SSSS", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 20, Name = "TTTT", Gender = "女", Age = 32, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 21, Name = "UUUU", Gender = "男", Age = 42, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 22, Name = "VVVV", Gender = "女", Age = 62, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 23, Name = "WWWW", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 24, Name = "XXXX", Gender = "女", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 25, Name = "YYYY", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 26, Name = "ZZZZ", Gender = "女", Age = 22, PhoneNumber = "123456789" });

            // 模拟分页
            var data = new
            {
                total = list.Count,
                rows = list.Skip((pageNumber - 1) * pageSize).Take(pageSize)
            };
            context.Response.Write(JsonConvert.SerializeObject(data));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class Person
    {
        /// 
        /// 编号
        /// 
        public int Id { get; set; }

        /// 
        /// 姓名
        /// 
        public string Name { get; set; }

        /// 
        /// 性别
        /// 
        public string Gender { get; set; }

        /// 
        /// 年龄
        /// 
        public int Age { get; set; }

        /// 
        /// 手机号
        /// 
        public string PhoneNumber { get; set; }
    }
}

运行结果如下图所示:
ASP.NET中使用Bootstrap-Table显示后台数据_第1张图片

你可能感兴趣的:(ASP.NET,Bootstrap-Table)