栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > C/C++/C#

前端框架:Bootstrap table 分页,排序,搜索 记录

C/C++/C# 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

前端框架:Bootstrap table 分页,排序,搜索 记录

做CRM或其他后台系统 ,必需至少掌握一个前端框架。
之前学习使用EASYUI写了一个小系统 ,感觉还蛮好用的,就是外观不太好看。
所以现在学习主流的响应式框架 Bootstrap。感觉外观还真是变好看的~哈

1.引用JS 使用的是 bootstrap-3.3.5-dist
2.引用table插件 bootstrap-table.js(谷歌搜索下就有~)
3.引用paginator插件 bootstrap-paginator.js(谷歌搜索下就有~)

前端代码如下:





    
    TableTest2
    
    
    
    
    
    
    



    

后端请求代码:

 [HttpPost]
 public JsonResult tablePost3(string searchText="",string sortName ="",string sortOrder="desc",int pageSize = 10, int pageNumber = 1)
 {

     //1.排序
     //2.字段排序 
     //3.搜索关键字

     var db = new QHC_IIMSContext();
     List proList = null;
     if (sortOrder == "desc")
     {
  //desc 降序
  proList = db.T_Product.OrderByDescending(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
     }
     else
     {
  //asc 升序
  proList = db.T_Product.OrderBy(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
     }

     //获取数据库总条数
     int total = db.T_Product.Count();

     //匿名list  可以筛
     var newList = proList.Select(t => new { ID = t.ID, Sku = t.Sku, ProductName = t.ProductName, Price = t.Price, Descrtiption = t.Descrtiption }).ToList();

     var json = new { total = total, rows = newList };

     return Json(json, JsonRequestBehavior.AllowGet);
 }

前端显示 时,注意JSON中的数据的大小写问题

点击排序SKU,提交请求

返回结果:

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/231909.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号