标签：设置 title apt i++ 数据 new 记录 size checkbox
效果如图：
一、声明talbe
<div class="container"> <table id="table" class="table table-bordered"> </table> </div>
二、JS绑定Table值
当前使用的是服务端分页 sidePagination: "server" 。根据数据库的查询结果绑定table数据每次只查询当前显示的行，适合数据量大的程序；还有一种是客户端分页，是一次性查询出所有的内容，然后再分页，客户端分页的模式适合数据量小的程序。client模式的分页还没研究，这里就不演示了。
<script type="text/jscript"> $(function () { $(‘#table‘).bootstrapTable({ //请求方法 method: ‘get‘, //是否显示行间隔色 striped: true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） cache: false, //是否显示分页（*） pagination: true, //是否启用排序 sortable: true, //排序方式 sortOrder: "asc", //初始化加载第一页，默认第一页 pageNumber: 1, //每页的记录行数（*） pageSize: 10, //可供选择的每页的行数（*） pageList: [10, 20, 30, 40], //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据 url: "jgdx.ashx?action=GetJson", //默认值为 ‘limit‘,传给服务端的参数为：limit, offset, search, sort, order Else //queryParamsType:‘‘, //查询参数,每次调用是会带上这个参数，可自定义 queryParams: function (params) { return { rows: params.limit, //页面大小 page: (params.offset / params.limit) + 1, //页码 sort: params.sort, //排序列名 sortOrder: params.order //排位命令（desc，asc） }; }, //分页方式：client客户端分页，server服务端分页（*） sidePagination: "server", //是否显示搜索 search: false, strictSearch: true, idField: "id", columns: [{ field: ‘rownum‘, title: ‘序号‘, align: ‘center‘ }, { field: ‘dwmc‘, title: ‘监督对象名称‘, align: ‘center‘ }, { field: ‘xkzh‘, title: ‘许可证号‘, align: ‘center‘ }, { field: ‘dwdz‘, title: ‘单位地址‘, align: ‘center‘ }, { field: ‘fzr‘, title: ‘负责人‘, align: ‘center‘ }, { field: ‘sj1‘, title: ‘手机‘, align: ‘center‘ }, { field: ‘cishu‘, title: ‘监督数‘, align: ‘center‘ }, { field: ‘mid‘, title: ‘操作‘, align: ‘center‘, formatter: function (value, row, index) { //通过formatter可以自定义列显示的内容 //value：当前field的值，即id //row：当前行的数据 var a = ‘<a href="#" >编辑</a> ‘; var b = ‘<a href="#" >删除</a>‘; return a + b; } }, { checkbox: true, visible: true //是否显示复选框 }], pagination: true }); }); </script>
三、后台代码
string sql = ""; DataSet ds = new DataSet(); public void ProcessRequest(HttpContext context) { string output = ""; string action = context.Request["action"].ToString();switch (action) { case "GetJson": DataTable dt = getData(context); string str = DataTableToJsonWithStringBuilder(dt); output = "{\"total\":" + getCout(context) + ",\"rows\":" + str + "}"; break;default: break; } context.Response.ContentType = "text/plain"; context.Response.Write(output); }public string GetJson(HttpContext context) { DataTable dt = getData(context); return DataTableToJsonWithStringBuilder(dt); } public DataTable getData(HttpContext context) { int rows = Convert.ToInt32(context.Request["rows"]);//显示行数 int page = Convert.ToInt32(context.Request["page"]);//页码 int starNum = rows * page - rows + 1;//开始行数 int endNum = rows * page;//结束行数 string sql = "select * from (select row_number() over(order by @@servername) as rownum,* from Jgdx)a where rownum between " + starNum + " and " + endNum + ""; DataSet ds = pub.GetDataset(sql, "xinxi"); return ds.Tables["xinxi"]; } public int getCout(HttpContext context) { string sql = "select count(*) count from Jgdx"; DataSet ds = pub.GetDataset(sql, "xinxi"); return Convert.ToInt32(ds.Tables["xinxi"].Rows[0]["count"]); } public string DataTableToJsonWithStringBuilder(DataTable table) { var jsonString = new StringBuilder(); if (table.Rows.Count > 0) { jsonString.Append("["); for (int i = 0; i < table.Rows.Count; i++) { jsonString.Append("{"); for (int j = 0; j < table.Columns.Count; j++) { if (j < table.Columns.Count - 1) { jsonString.Append("\"" + table.Columns[j].ColumnName.ToString() + "\":" + "\"" + table.Rows[i][j].ToString() + "\","); } else if (j == table.Columns.Count - 1) { jsonString.Append("\"" + table.Columns[j].ColumnName.ToString() + "\":" + "\"" + table.Rows[i][j].ToString() + "\""); } } if (i == table.Rows.Count - 1) { jsonString.Append("}"); } else { jsonString.Append("},"); } } jsonString.Append("]"); } return jsonString.ToString(); }
标签：设置 title apt i++ 数据 new 记录 size checkbox
原文地址：http://www.cnblogs.com/zhangjd/p/7895453.html
