宝安网站建设深圳信科,临沧网络推广,做网站公司名字,wordpress伪静态中文乱码今天分享一下bootstraptable的相关技能点#xff0c;由于第一次接触#xff0c;所以刚开始碰了好多壁#xff0c;于是趁现在过去不久#xff0c;先总结总结。Bootstraptable简单的来说就是一个表格控件#xff0c;但是这个表格可不是一般的表格#xff0c;分页、排序、查… 今天分享一下bootstraptable的相关技能点由于第一次接触所以刚开始碰了好多壁于是趁现在过去不久先总结总结。Bootstraptable简单的来说就是一个表格控件但是这个表格可不是一般的表格分页、排序、查询都自带了你就给他一个json数据就可以了。接下来我们就看看怎么用1.先在页面中引入所需的js文件和css文件link relstylesheet hrefbootstrap.min.css
link relstylesheet hrefbootstrap-table.css
script srcjquery.min.js/script
script srcbootstrap.min.js/script
script srcbootstrap-table.js/script
script srcbootstrap-table-zh-CN.js/script2.在我们所需要展示数据的表格上加个id或者class都可以在这里我以id为例。table idtable/table3.接下来就是给表格里面加数据了我们可以在加载当前页面时利用ajax去请求控制器查询所需要的数据然后放在一个集合中转换成json格式就可以了。下面是js中相关代码$(function () {caseTable();});//加载数据
function caseTable() {$(#table).bootstrapTable({method: get, //提交方法striped: true, //是否显示行间隔色cache:true, //是否使用缓存默认为true所以一般情况下需要设置一下这个属性singleSelect: false, //设置True 将禁止多选url: /Home/GetAllAnJian,//查询的地址dataType: json, //服务器返回的数据类型pagination: true, //是否分页pageSize: 5, //页大小pageNumber: 1, //当前页search: false, //显示搜索框contentType: application/x-www-form-urlencoded, //发送到服务器的数据编码类型queryParams:null, //参数// function (parms) {// return {// aid: $(#aid).val(),// };//},columns: [{title: 案件编号, //列标题field: aid, //该列映射的data的参数名align: center, //水平对齐方式valign: middle, //垂直对齐方式sortable: true //是否排序},{title: 案件名称,field: aname,align: center,valign: middle,sortable: true},{title: 案件类型,field: atypename,align: center,valign: middle,sortable: true},{field: ,title: 操作,halign: center,align: center,width: 50px, //宽度sortable: true, //下面是单独加的按钮formatter: function (value,row,index) {var e button classbtn btn-primary onclicktijiao(\ row.aid \)提交/button;return e;},}]});
}4.后台查询数据的代码以asp mvc为例控制器是HomeController请求数据的方法//查询所有的案件信息
public JsonResult GetAllAnJian(string aid)
{ListAnJian anAll (from a in entity.AnJianwhere a.astatename.Equals(新建)select a).ToList();
//将日期类型转换成string类型
for (int i 0; i anAll.Count; i){anAll[i].adate_formate anAll[i].adate.ToString();}return Json(anAll, JsonRequestBehavior.AllowGet);}下面是演示图数据随便填的对了另外结合layui使用更好用哦时候不早了明天在说结合layui使用的方法。往期内容推荐layui如何实现添加数据时关闭页面层并实时刷新表格数据2020-06-01 你不知道ADO.Net中操作数据库的步骤【超详细整理】2020-05-30 Photoshop中将图片拖不进软件的编辑区的解决方法超详细2020-05-29 eclipse下载与安装步骤详解包含解决错误最全最详细多图2020-05-28 Boostrap技能点整理之【按钮样式】2020-05-27 Boostrap技能点整理之【网格系统】2020-05-26
