第一次动手实现bootstrap table分页效果


Posted in Javascript onSeptember 22, 2016

先上图吧,这就是bootstrap table分页效果图

第一次动手实现bootstrap table分页效果

上代码(这一部分是工具栏的,还包括slider滑动条) 

<div class="box-body">
 <div class="row">
 <div class="form-group col-xs-3" style="width: 432px;">
 <label for="SendUser" class="col-sm-2 control-label">重量</label>
 <div class="col-sm-10">
 <div class="nstSlider"
 id="shapeNstSlider"
 data-aria_enabled="true"
 data-range_min="1"
 data-range_max="3000"
 data-cur_min="1"
 data-cur_max="3000">
 <div id="bar" class="bar"></div>
 <div id="leftGrip" class="leftGrip"></div>
 <div id="rightGrip" class="rightGrip"></div>
 </div>
 <div class="input-prepend input-append pull-left">
 <input class="span2 " id="leftLabel" style="width: 50px;" onblur="leftChange(this)" type="text">
 <span class="add-on"><em>ct</em></span>
 </div>
 <div class="input-prepend input-append pull-right">
 <input class="span2" id="rightLabel" style="width: 50px;" onblur="rightChange(this)" type="text">
 <span class="add-on"><em>ct</em></span>
 </div>
 </div>
 </div>
 <div class="form-group col-xs-3" style="width: 432px;">
 <label for="SendUser" class="col-sm-2 control-label">价格</label>
 <div class="col-sm-10">
 <div class="nstSlider"
 id="priceNstSlider"
 data-aria_enabled="true"
 data-range_min="1000"
 data-range_max="9999999"
 data-cur_min="1000"
 data-cur_max="9999999">
 <div id="priceBar" class="bar"></div>
 <div id="priceleftGrip" class="leftGrip"></div>
 <div id="pricerightGrip" class="rightGrip"></div>
 </div>
 <div class="input-prepend input-append pull-left">
 <input class="span2 " id="priceleftLabel" style="width: 80px;" onblur="priceleftChange(this)" type="text">
 <span class="add-on"><em>RMB</em></span>
 </div>
 <div class="input-prepend input-append pull-right">
 <input class="span2" id="pricerightLabel" style="width: 80px;" onblur="pricerightChange(this)" type="text">
 <span class="add-on"><em>RMB</em></span>
 </div>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="form-group col-xs-3" style="width: 432px;">
 <label for="ReceiveUser" class="col-sm-2 control-label">切工</label>
 <div class="col-sm-10">
 <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">EX</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">VG</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">G</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">F</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 57px; height: 40px; line-height: 28px;" onclick="cutChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">P</a>
 </div>
 </div>
 <div class="form-group col-xs-3" style="width: 432px;">
 <label class="col-sm-2 control-label">颜色</label>
 <div class="col-sm-10">
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">D</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">E</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">F</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">G</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">H</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">I</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">J</a>
 <a class="btn btn-app" h="0" style="background-color: white;" onclick="colorChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">K</a>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="form-group" style="width: 100%; margin-left: -105px;">
 <label class="col-sm-2 control-label">净度</label>
 <div class="col-sm-10">
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">IF</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">VVS1</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">VVS2</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">VS1</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">VS2</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">SI1</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">SI2</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">I1</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">I2</a>
 <a class="btn btn-app" h="0" style="background-color: white; width: 61px; height: 40px; line-height: 28px;" onclick="clarityChange(this)" onmouseover="coChange(this)" onmouseout="coChange(this)">I3</a>
 </div>
 </div>
 </div>
 </div>
 </div>

下面是表格的

<table id="reportTable" class="table table-bordered table-striped" style="font-size: 10px;"></table>

这一部分是表格的 

$('#reportTable').bootstrapTable({
 method: 'post',
 url: '/qStock/AjaxPage',
 dataType: "json",
 striped: true, //使表格带有条纹
 pagination: true, //在表格底部显示分页工具栏
 pageSize: 22,
 pageNumber: 1,
 pageList: [10, 20, 50, 100, 200, 500],
 idField: "ProductId", //标识哪个字段为id主键
 showToggle: false, //名片格式
 cardView: false,//设置为True时显示名片(card)布局
 showColumns: true, //显示隐藏列 
 showRefresh: true, //显示刷新按钮
 singleSelect: true,//复选框只能选择一条记录
 search: false,//是否显示右上角的搜索框
 clickToSelect: true,//点击行即可选中单选/复选框
 sidePagination: "server",//表格分页的位置
 queryParams: queryParams, //参数
 queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求
 toolbar: "#toolbar", //设置工具栏的Id或者class
 columns: column, //列
 silent: true, //刷新事件必须设置
 formatLoadingMessage: function () {
 return "请稍等,正在加载中...";
 },
 formatNoMatches: function () { //没有匹配的结果
 return '无符合条件的记录';
 },
 onLoadError: function (data) {
 $('#reportTable').bootstrapTable('removeAll');
 },
 onClickRow: function (row) {
 window.location.href = "/qStock/qProInfo/" + row.ProductId;
 },
 });

这一部分是slider的 

$('#shapeNstSlider').nstSlider({
 "left_grip_selector": "#leftGrip",
 "right_grip_selector": "#rightGrip",
 "value_bar_selector": "#bar",
 "value_changed_callback": function (cause, leftValue, rightValue, prevLeft, prevRight) {
 var $grip = $(this).find('#leftGrip'),
 whichGrip = 'left grip';
 if (leftValue === prevLeft) {
 $grip = $(this).find('#rightGrip');
 whichGrip = 'right grip';
 }

 $(this).parent().find('#leftLabel').val(leftValue / 100);
 $(this).parent().find('#rightLabel').val(rightValue / 100);
 $("#reportTable").bootstrapTable('refresh');
 }
 });

 $('#priceNstSlider').nstSlider({
 "left_grip_selector": "#priceleftGrip",
 "right_grip_selector": "#pricerightGrip",
 "value_bar_selector": "#priceBar",
 "value_changed_callback": function (cause, leftValue, rightValue, prevLeft, prevRight) {
 var $grip = $(this).find('#priceleftGrip'),
 whichGrip = 'left grip';
 if (leftValue === prevLeft) {
 $grip = $(this).find('#pricerightGrip');
 whichGrip = 'right grip';
 }

 $(this).parent().find('#priceleftLabel').val(leftValue);
 $(this).parent().find('#pricerightLabel').val(rightValue);
 $("#reportTable").bootstrapTable('refresh');
 }
 });

这一部分是改变slider的游标之后的 

function leftChange(obj) {
 $('#shapeNstSlider').nstSlider("set_position", $(obj).val(), $("#rightLabel").val());
 $("#reportTable").bootstrapTable('refresh');
 }

 function rightChange(obj) {
 $('#shapeNstSlider').nstSlider("set_position", $("#leftLabel").val(), $(obj).val());
 $("#reportTable").bootstrapTable('refresh');
 }

 function priceleftChange(obj) {
 $('#priceNstSlider').nstSlider("set_position", $(obj).val(), $("#pricerightLabel").val());
 $("#reportTable").bootstrapTable('refresh');
 }

 function pricerightChange(obj) {
 $('#priceNstSlider').nstSlider("set_position", $("#priceleftLabel").val(), $(obj).val());
 $("#reportTable").bootstrapTable('refresh');
 }

这是bootstrap-table带参到后台去的代码 

function queryParams(params) { //配置参数
 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
 pageSize: params.limit, //页面大小
 pageNumber: params.pageNumber, //页码
 minSize: $("#leftLabel").val(),
 maxSize: $("#rightLabel").val(),
 minPrice: $("#priceleftLabel").val(),
 maxPrice: $("#pricerightLabel").val(),
 Cut: Cut,
 Color: Color,
 Clarity: Clarity,
 sort: params.sort, //排序列名
 sortOrder: params.order//排位命令(desc,asc)
 };
 return temp;
 }

其它的部分 

function colorChange(obj) { //颜色
 var p = $(obj).parent().children('a');
 if ($(obj).css("background-color") == "rgb(255, 177, 112)") {
 $(obj).css("background-color", "white");
 $(obj).css("color", "black");
 $(obj).attr("h", 1);
 } else {
 $(obj).css("background-color", "#FFB170");
 $(obj).css("color", "white");
 $(obj).attr("h", 0);
 }

 var data = [];
 for (var i = 0; i < $(p).length; i++) {
 var a = $(p)[i];
 if ($(a).attr("h") == "1") {
 data[i] = $(a).text();
 }
 }
 Color = "";
 for (var i = 0; i < data.length; i++) {
 if (data[i] != undefined) {
 Color += "'" + data[i] + "',";
 }
 }
 Color = Color.substring(0, Color.lastIndexOf(',')); //颜色条件
 $("#reportTable").bootstrapTable('refresh');
 }

 function clarityChange(obj) { //净度
 var p = $(obj).parent().children('a');
 if ($(obj).css("background-color") == "rgb(255, 177, 112)") {
 $(obj).css("background-color", "white");
 $(obj).css("color", "black");
 $(obj).attr("h", 1);
 } else {
 $(obj).css("background-color", "#FFB170");
 $(obj).css("color", "white");
 $(obj).attr("h", 0);
 }

 var data = [];
 for (var i = 0; i < $(p).length; i++) {
 var a = $(p)[i];
 if ($(a).attr("h") == "1") {
 data[i] = $(a).text();
 }
 }
 Clarity = "";
 for (var i = 0; i < data.length; i++) {
 if (data[i] != undefined) {
 Clarity += "'" + data[i] + "',";
 }
 }
 Clarity = Clarity.substring(0, Clarity.lastIndexOf(',')); //净度条件
 $("#reportTable").bootstrapTable('refresh');
 }

 function coChange(obj) { //改变颜色事件
 if ($(obj).css("background-color") == "rgb(255, 177, 112)") {
 $(obj).css("background-color", "white");
 $(obj).css("color", "black");
 } else {
 $(obj).css("background-color", "#FFB170");
 $(obj).css("color", "white");
 }
 }

动作方法是这样的 

/// <summary>
 /// 分页数据
 /// </summary>
 /// <param name="pageSize">页面大小</param>
 /// <param name="pageNumber">页码</param>
 /// <param name="CersNo"></param>
 /// <param name="StoneID"></param>
 /// <param name="sort">排序的列名</param>
 /// <param name="sortOrder">排序的命令方式</param>
 /// <returns></returns>
 /// pageSize,pageNumber请不要更改变量名(sort,sortOrder如需排序,请使用这两个参数,不可更改变量名)
 public ActionResult AjaxPage(string minSize, string maxSize, string minPrice, string maxPrice,
 string Shape, string Color, string Cut, string Clarity,
 int? pageSize, int? pageNumber, string sort, string sortOrder)
 { //自己写里面的,返回的是Json数据
 }

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
JavaScript 是什么意思
Sep 22 #Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 #Javascript
JavaScript与java语言有什么不同
Sep 22 #Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 #Javascript
You might like
php类常量用法实例分析
2015/07/09 PHP
php文件上传类的分享
2017/07/06 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
简单谈谈python中的多进程
2016/11/06 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
浅析Python requests 模块
2020/10/09 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
建筑自我鉴定
2013/10/19 职场文书
服装机修工岗位职责
2013/12/26 职场文书
中国央视网签名寄语
2014/01/18 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
爱牙日活动总结
2014/08/29 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
寻找成龙观后感
2015/06/12 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
一起来学习Python的元组和列表
2022/03/13 Python