jQuery实现页码跳转式动态数据分页
我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果：
下面我们给出全部效果代码：
HTML全部代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现页码跳转式动态数据分页-我们</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后台分页 -->
<script type="text/javascript" src="js/front-endPage.js"></script><!-- 前台分页 -->
<script type="text/javascript" src="js/shujv2.js"></script>
<link rel="stylesheet" type="text/css" href="css/table.css" rel="external nofollow" >
</head>
<body>
<div id="histroyBox"></div>
<script type="text/javascript">
//前台分页的样子
$('#histroyBox').CJJTable({
'title':["装点","卸点","运输货物","下单日期","作者"],//thead中的标题 必填
'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填
'display':[1,1,1,1,1,2],//隐藏域，1显示，2隐藏 必填
'pageNUmber':10,//每页显示的条数 选填
'pageLength':data.length,//选填
'url':data,//数据源 必填
dbTrclick:function(e){//双击tr事件
alert(e.find('.taskCode').html())
}
});
//后台分页的样子
/*$('#histroyBox').CJJTable({
'title':["装点","卸点","运输货物","下单日期"],//thead中的标题 必填
'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填
'display':[1,1,1,1,2,2],//隐藏域，1显示，2隐藏 必填
'pageJson':{
"taskId":528710,
"pageSize":100,//ajax请求参数中的每页展示数量 选填
"token":"yJUmunFeG3REqisYAmCfeA"
},
'url':'api/quoted/quotedList',//数据源 必填
dbTrclick:function(that){ //双击tr事件
alert(that.find('.contactName').html())
}
});*/
</script>
</body>
</html>
其中<script type="text/javascript" src="js/shujv2.js"></script>是数据JS内容，大家在实际操作的时候可以用JS获取json达到要的数据格式：
shujv2.js代码：
var data = [ {
"warehouseID" : "3750",
"warehouseCode" : "CK20140825061813777127447",
"province" : "上海",
"endProvince" : "江苏省",
"provinceId" : "310000",
"cityId" : "310100",
"areaId" : "310109",
"endProvinceId" : "320000",
"endCityId" : "320600",
"endAreaId" : "320612",
"materialId" : "0",
"material" : "",
"specId" : "0",
"productNId" : "0",
"varietiesId" : "8",
"varietiesTypeId" : "621",
"taskCode" : "T1611230481",
"customerID" : "20147",
"customerName" : "我们",
"createDate" : "2016-11-23 18:41:40",
"wareHouseName" : "找钢仓库",
"city" : "上海市",
"area" : "虹口区",
"startAddr" : "逸仙路25号",
"endCity" : "南通市",
"endArea" : "通州区",
"endAddr" : "1",
"varietiesTypeName" : "钢材",
"varieties" : "线材",
"productN" : "",
"spec" : "",
"weight" : "1",
"num" : "1",
"receiver" : "",
"receiverPhone" : "1",
"remark" : "",
"label" : "",
"startAddrNumber" : "1",
"varietiesNumber" : "1",
"contactsId" : "22494",
"contactsName" : "刘宇测试"
} ]
front-endPage.js是分页加载的效果实现。代码为：
;(function($, window, document,undefined) {
var cjjTable = function(ele,opt){
this.$element = ele,
this.defaults ={
title:null,
body:null,
display:null,
pageNUmber:8,
pageLength:0,
url:null,
dbTrclick:function(that){
}
}
this.options = $.extend({},this.defaults,opt)
}
cjjTable.prototype = {
start:function(){
var _this = this;
var titlelistBox="";
var titlesmall="";
for(var i=0;i<_this.options.title.length;i++){
titlesmall+="<th>"+_this.options.title[i]+"</th>";
titlelistBox = titlesmall;
}
var json = "";
var maxpagenumberBox = 7;//选择项最多的数量
var json = this.options.url;
var histroy_DDBox = "";
var histroy_DD = "";
var firstPageNumber=_this.options.pageLength>_this.options.pageNUmber?_this.options.pageNUmber:_this.options.pageLength;
for (var i = 0; i <firstPageNumber; i++) {
var bodyBigBox="";
var bodyBox="";
for(var x=0;x<_this.options.body.length;x++){
var type = _this.options.body[x];
var display = "table-cell";
if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){
display = _this.options.display[x]*1==1?"table-cell":"none";
}
bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
bodyBigBox = bodyBox;
}
histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
histroy_DDBox = histroy_DD;
}
$( _this.$element.selector+" table tfoot").html("");
if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) == 1) {
$( _this.$element.selector+" .nextPage").css("display", "none");
$(_this.$element.selector+" .endPage").css("display", "none");
}
var maxpagenumberBoxBigbox = "";
var maxpagenumberBoxBig = "";
if (Math.ceil(_this.options.pageLength/ _this.options.pageNUmber) < maxpagenumberBox) {
for (var i = 0; i < Math.ceil(_this.options.pageLength/ _this.options.pageNUmber); i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
} else {
for (var i = 0; i < maxpagenumberBox; i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
}
var buttonTfoot = "<tr>"+
"<td colspan='"+_this.options.title.length+"'>"+
"<div style='float:right;margin-left:10px;' class='tfootRight'>"+
"<input placeholder='输入页码' type='text'>"+
"<button>确定</button>"+
"</div>"+
"<div style='float:right'>"+
"<span class='firstPage' style='margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;'>首页</span>"+
"<span class='lastPage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一页</span>"+
"<ul class='pagenumberBox'>"+maxpagenumberBoxBigbox+"</ul>"+
"<input class='typeNumber' type='text' value='1' onfocus='this.blur()' style='display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;'>"+
"<span class='nextPage' style='margin-right:10px;float:left;cursor: pointer;'>下一页</span>"+
"<span class='endPage' style='cursor: pointer;float:left;'>尾页</span>"+
"</div>"+
"<div style='float:right'>"+
"<select><option value='5'>5</option><option value='10'>10</option><option value='20'>20</option><option value='50'>50</option><option value='100'>100</option><option value='200'>200</option><option value='500'>500</option></select>"
"</div>"+
"</div>"+
"<td>"+
"<tr>";
_this.$element.html("<table class='CJJ-Table'><thead>"+titlelistBox+"</thead><tbody>"+histroy_DDBox+"</tbody><tfoot>"+buttonTfoot+"</tfoot></table>");
$(_this.$element.selector+ ' select').val(_this.options.pageNUmber);
if(Math.ceil(_this.options.pageLength/_this.options.pageNUmber)<2){
$(_this.$element.selector+ ' .endPage').hide();
$(_this.$element.selector+ ' .nextPage').hide();
}
$(_this.$element.selector+ ' .tfootRight input').unbind('keyup').keyup(function(){
_this.inputKeyup(_this,maxpagenumberBox,json);
})
$(_this.$element.selector+ ' .tfootRight button').unbind('click').click(function(){
_this.button(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .firstPage').unbind('click').click(function(){
_this.firstPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .endPage').unbind('click').click(function(){
_this.endPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' .nextPage').unbind('click').click(function(){
_this.nextPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' table tfoot ul li').unbind('click').click(function(){
_this.nextTableLi(_this,maxpagenumberBox,json,$(this));
});
$(_this.$element.selector+ ' .lastPage').unbind('click').click(function(){
_this.lastPage(_this,maxpagenumberBox,json);
});
$(_this.$element.selector+ ' select').unbind('change').change(function(){
_this.select(_this,maxpagenumberBox,json,$(this));
});
$(_this.$element.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
_this.options.dbTrclick($(this));
});
},
inputKeyup:function(e,maxpagenumberBox,json){
var val = $(e.$element.selector+ " .tfootRight input").val();
if (val == 0) {
var val2 = val.replace(0, "");
} else if (val > 0 && val <= Math.ceil(e.options.pageLength / e.options.pageNUmber)) {
var val2 = val.replace(/[^0-9]/g, "");
} else if (val > Math.ceil(e.options.pageLength/ e.options.pageNUmber)) {
var val2 = Math.ceil(e.options.pageLength / e.options.pageNUmber);
}
$(e.$element.selector+ ' .tfootRight input').val(val2);
},
button:function(e,maxpagenumberBox,json){
var val = $(e.$element.selector+ ' .tfootRight input').val();
$(e.$element.selector+ " .typeNumber").val(val);
if (val != "") {
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
}
},
firstPage:function(e,maxpagenumberBox,json){
$(e.$element.selector+ " .typeNumber").val(1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
endPage:function(e,maxpagenumberBox,json){
$(e.$element.selector+ " .typeNumber").val(Math.ceil(e.options.pageLength / e.options.pageNUmber));
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
nextPage:function(e,maxpagenumberBox,json){
var number = $(e.$element.selector+ " .typeNumber").val();
$(e.$element.selector+ " .typeNumber").val(number * 1 + 1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
nextTableLi:function(e,maxpagenumberBox,json,that){
var val = that.html();
$(e.$element.selector+ " .typeNumber").val(val);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
lastPage:function(e,maxpagenumberBox,json){
var number = $(e.$element.selector+ " .typeNumber").val();
if (number > 1) {
$(e.$element.selector+ " .typeNumber").val(number * 1 - 1);
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
}
},
select:function(e,maxpagenumberBox,json,that){
var select = that.find("option:selected").val();
$(e.$element.selector+ " .typeNumber").val(1);
e.options.pageNUmber = select;
e.page($(e.$element.selector+ " .typeNumber").val(), e.options.pageNUmber, maxpagenumberBox,json,e.$element, e);
},
page:function(Pagenumber, pageNUmber, maxpagenumberBox,json,that,e) {
var histroy_DDBox = "";
var histroy_DD = "";
var lastPage=Pagenumber<Math.ceil(e.options.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength;
for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) {
var bodyBigBox="";
var bodyBox="";
for(var x=0;x<e.options.body.length;x++){
var type = e.options.body[x];
var display = "table-cell";
if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){
display = e.options.display[x]*1==1?"table-cell":"none";
}
bodyBox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>";
bodyBigBox = bodyBox;
}
histroy_DD +="<tr class='new_productBox'>"+bodyBigBox+"</tr>";
histroy_DDBox = histroy_DD;
}
$(that.selector+" table tbody").html(histroy_DD);
var maxpagenumberBoxBigbox = "";
var maxpagenumberBoxBig = "";
if (Math.ceil(e.options.pageLength/ e.options.pageNUmber) < maxpagenumberBox) {
for (var i = 0; i < Math.ceil(e.options.pageLength/ e.options.pageNUmber); i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
} else {
for (var i = 0; i < maxpagenumberBox; i++) {
var className = "";
if(i==0){
className = "pagenumberBoxLi";
}
maxpagenumberBoxBig += '<li class="'+className+'">' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
}
$(that.selector+" table tfoot ul").html(maxpagenumberBoxBigbox);
if (Pagenumber == 1) {
$(that.selector+" .firstPage,"+that.selector+" .lastPage").hide();
} else {
$(that.selector+" .firstPage,"+that.selector+" .lastPage").show();
}
if (Pagenumber == Math.ceil(e.options.pageLength / pageNUmber)) {
$(that.selector+" .endPage,"+that.selector+" .nextPage").hide();
} else {
$(that.selector+" .endPage,"+that.selector+" .nextPage").show();
}
if (Math.ceil(e.options.pageLength/ pageNUmber) > maxpagenumberBox) {
if (Pagenumber > 0 && Pagenumber < Math.ceil(maxpagenumberBox / 2) * 1 + 1) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = 0; i < maxpagenumberBox; i++) {
maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
} else if (Pagenumber >= Math.ceil(maxpagenumberBox / 2) * 1 + 1 && Pagenumber < Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = Pagenumber - Math.ceil(maxpagenumberBox / 2) + 1; i < Pagenumber * 1 + Math.ceil(maxpagenumberBox / 2) * 1; i++) {
maxpagenumberBoxBig += '<li>' + (i) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Math.ceil(maxpagenumberBox / 2) - 1).addClass('pagenumberBoxLi');
} else if (Pagenumber >= Math.ceil(e.options.pageLength / pageNUmber) - Math.ceil(maxpagenumberBox / 2) + 2 && Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
maxpagenumberBoxBigbox = "";
maxpagenumberBoxBig = "";
for (var i = Math.ceil(e.options.pageLength / pageNUmber) - maxpagenumberBox; i < Math.ceil(e.options.pageLength / pageNUmber); i++) {
maxpagenumberBoxBig += '<li>' + (i * 1 + 1) + '</li>';
maxpagenumberBoxBigbox = maxpagenumberBoxBig;
}
$(that.selector+" .pagenumberBox").html(maxpagenumberBoxBigbox);
$(that.selector+' .pagenumberBox li').eq(Pagenumber - Math.ceil(e.options.pageLength/ pageNUmber) + maxpagenumberBox * 1 - 1).addClass('pagenumberBoxLi');
}
} else {
if (Pagenumber <= Math.ceil(e.options.pageLength / pageNUmber)) {
$(that.selector+' .pagenumberBox li').removeClass('pagenumberBoxLi');
$(that.selector+' .pagenumberBox li').eq(Pagenumber - 1).addClass('pagenumberBoxLi');
}
}
$(that.selector+ ' table tfoot ul li').unbind('click').click(function(){
e.nextTableLi(e,maxpagenumberBox,json,$(this));
});
$(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){
e.options.dbTrclick($(this));
});
}
}
$.fn.CJJTable = function(options){
var cjj = new cjjTable(this,options);
return cjj.start();
}
})(jQuery, window, document);
以上就是这个效果的全部内容，有兴趣的朋友测试一下，需要注意的就是在数据JS中，数据格式和重要，需要增加附加数据一定要确保ID名唯一。感谢你对我们的支持。
相关推荐
-
jQuery插件DataTables分页开发心得体会
写Blog目的:不是为人气,只是留份笔记:啰嗦不要紧,只怕有遗漏,以后想不起来. 官网:https://datatables.net/ 中文官网:http://datatables.club/ 开发环境:Python 3.6.0.Anaconda 4.3.1.Django.JetBrains PyCharm 2017.1.5 按我项目的开发过程简单整理. 1.第一版本,无分页. 在此之前有用到过DataTables(更多的是easyui中的Datagrid,另之前服务端是PHP),因此想着前端/
-
jQuery实现ajax无刷新分页页码控件
这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是
-
jQuery Ajax 实现分页 kkpager插件实例代码
代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/
-
快速掌握jquery分页插件jqPaginator的使用方法
本文将为大家介绍一款非常赞的jQuery分页插件:jqPaginator. jqPaginator简洁.高度自定义的jQuery分页组件,适用于多种应用场景. 简介 现在网上各种各样的分页组件很多,但是很难找到十分"称心如意"的,于是jqPaginator诞生了. 我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中.以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构.所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了
-
jQuery Pagination分页插件_动力节点Java学院整理
插件简介 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位. 使用方法 跟一般的jQuery插件一样,此插件使用也很简单便捷.方法是pagination,例如$("#page").pagination(100); 参数 参数名 描述 参数值 maxentries 总
-
基于jQuery封装的分页组件
由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果. 1.page.init.css @charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to
-
jQuery给表格添加分页效果
本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <t
-
jQuery条件分页 代替离线查询（附代码）
import javax.persistence.criteria.CriteriaBuilder; import javax.persistence.criteria.CriteriaQuery; import javax.persistence.criteria.Join; import javax.persistence.criteria.Predicate; import javax.persistence.criteria.Root; import net.sf.json.JSONOb
-
jQuery实现页码跳转式动态数据分页
我们这次给大家带来的是用jQuery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效.我们先来看下实际效果: 下面我们给出全部效果代码: HTML全部代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu
-
JS实现table表格数据排序功能(可支持动态数据+分页效果)
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
jQuery 锚点跳转滚动条平滑滚动一句话代码
jQuery锚点跳转滚动条平滑滚动一句话代码 复制代码 代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果 复制代码 代码如下: <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></sc
-
jQuery实现表格行和列的动态添加与删除方法【测试可用】
本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19
-
jQuery 实现批量提交表格多行数据的方法
批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了. 先上一部分代码(这是表头以及一个全选按钮) <table class="ui_table ui_table_hover ui_table_striped ui_table_style02 table_fixed"> <tr> <th width="3%" class=&
-
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧).这里主要是添加了它的特有属性并调用 class="chzn-select": jsp页面: <select class="chzn-select" id="CODE" name="CODE"> ...... </select> js页面: $(
-
使用Scrapy爬取动态数据
对于动态数据的爬取,可以选择selenium和PhantomJS两种方式,本文选择的是PhantomJS. 网址: https://s.taobao.com/search?q=%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-it
-
在vue中使用Echarts利用watch做动态数据渲染操作
依旧直接上代码- 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; <template> <div class="demo-container"> <div ref="chart_wrap" class="
-
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo