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

先上图吧，这就是分页效果图

上代码（这一部分是工具栏的，还包括slider滑动条）

下面是表格的

这一部分是表格的

这一部分是slider的

<div class="jb51code">
<pre class="brush:js;">
$('#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",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的游标之后的

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

其它的部分

<div class="jb51code">
<pre class="brush:js;">
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,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,"black");
} else {
$(obj).css("background-color","white");
}
}

动作方法是这样的

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!