$().pagination(总条数,配置项);

后端分页的跨页选择:

  思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码)、allChoice(当前页是否全选)、selected当前页的某一列是否被选中这样结构化的数据,然后使用结构化的数据渲染新页面,当查看其他页时,做页码匹配然后做整体替换。(存在的问题:数据更新频率比较高的数据不适合)

//原数据
    "list":[{
"createTime":1481904000000,
"stockCode":"333333",
"investorCode":"grun1",
"investorName":"小明",
"rationName":"ration4",
"authStatus":"00",
"rationCode":"011"
},{
"createTime":1481904000000,
"stockCode":"333333",
"investorCode":"grun1",
"investorName":"小花",
"rationName":"ration4",
"authStatus":"00",
"rationCode":"011"
}]
//结构化数据是关键点
[
{
"curPage":12,
"allChoice":false,
"list":[{
"createTime":1481904000000,
"stockCode":"333333",
"investorCode":"grun1",
"investorName":"小明",
"rationName":"ration4",
"authStatus":"00",
"rationCode":"011",
"selected":true
},{
"createTime":1481904000000,
"stockCode":"333333",
"investorCode":"grun1",
"investorName":"小花",
"rationName":"ration4",
"authStatus":"00",
"rationCode":"011",
"selected":true
}]
}
]

写在分页的callback方法中的数据组装和替换的代码如下:

function callback(page_index, jq){
var formData=init.formData;
formData.begin=page_index*init.items_per_page+1;
formData.end=(page_index+1)*init.items_per_page;
$remote.post(init.action,formData,function(data){
try{
console.log(scope.saveList[page_index].list);
}catch(e){//未初始化过
//开始
var dataList = data.list;
var listLen = dataList.length;
//初始化
for(var i=0; i < listLen; i++){
dataList[i].selected = false;
}
scope.saveList[page_index] = {};
scope.saveList[page_index].choiceAllFlag = false;
scope.saveList[page_index].list = dataList;
scope.saveList[page_index].curPage = page_index;//当前页码
}
scope.curPage2 = page_index;//当前页码 //切页码
var saveLen = scope.saveList.length;
for(var i=0; i < saveLen; i++){
if(scope.saveList[i].curPage == page_index){
//用历史页面 替换新数据
scope[init.list] = scope.saveList[i];
}
}
scope[init.list].formData=formData;//切换页数时使用的相同参数
if(!scope.$$phase){
scope.$apply();
}
});

全选、单选js代码

    //单选
$scope.choiceOne = function(item) {
// $scope.placingObjItem = item;
item.selected = !item.selected;
for(var i=0; i < $scope.applyList.list.length; i++){
if(!$scope.applyList.list[i].selected){//有未选中
var hasNotChoice = true;
$scope.choiceAllFlag = false;
$scope.saveList[$scope.curPage2].choiceAllFlag = false;
break;
}
}
if(!hasNotChoice){//全选
$scope.applyList.choiceAllFlag = true;
$scope.saveList[$scope.curPage2].choiceAllFlag = true;
}
$scope.saveList[$scope.curPage2].list = $scope.applyList.list;
};
//全选
$scope.choiceAll = function() {
if(!$scope.applyList.choiceAllFlag){
for(var i=0; i<$scope.applyList.list.length; i++){
$scope.applyList.list[i].selected = true;
}
}else{
for(var i=0; i<$scope.applyList.list.length; i++){
$scope.applyList.list[i].selected = false;
}
}
$scope.saveList[$scope.curPage2].list = $scope.applyList.list;
$scope.applyList.choiceAllFlag = !$scope.applyList.choiceAllFlag;
};

对应的HTML代码

          <table class="table table-hover">
<tr class="active">
<th v-click="choiceAll()">
<img v-show="!applyList.choiceAllFlag" src="css/img/all.png" />
<img v-show="applyList.choiceAllFlag" src="css/img/all-active.png" /></th>
<th>序号</th>
<th>协会编号</th>
<th>投资者名称</th>
<th>投资者类型</th>
<th>提交时间</th>
<th>状态</th>
</tr>
<tr v-repeat = "item in applyList.list">
<td v-click="choiceOne(item)">
<img v-show="!item.selected" src="css/img/all.png" />
<img v-show="item.selected" src="css/img/all-active.png" /></td>
<td>{{item.stockCode}}</td>
<td>{{item.investorCode}}</td>
<td>{{item.investorName}}</td>
<td>{{item.rationName}}</td>
<td>{{item.createTime}}</td>
<td>{{item.authStatus}}</td>
</tr>
</table>

技巧:

  try{}catch(){}捕获

  每页初始化次数保持一次。

jq pagination分页 全选、单选的思考的更多相关文章

  1. vue开发购物车,解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  2. vue分页全选和单选操作

    <!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...

  3. 邮箱性质--全选单选的操作和传值 用属性的name传值

    封装类 using System; using System.Collections.Generic; using System.Web; /// <summary> /// Ha 的摘要 ...

  4. 分别用js和jq实现百度全选反选效果

    js实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. vue-实现全选单选

    在获取列表页面数据时,通过forEach遍历存储数据的对象,给对象中添加一个selected变量,值为布尔值. 点击全选时,通过遍历将对象中selected的布尔值改变 点击单选时,被点中的通过筛选加 ...

  6. checkbox 全选 单选的使用

    绑定数据 if (!IsPostBack) { using (UsersDataContext con = new UsersDataContext()) { Repeater1.DataSource ...

  7. element-ui 里面el-checkbox多选框,实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  8. jq checkbox 的全选并ajax传参

    /全选按钮 $("#all").click(function(){ if(this.checked){ $(":checkbox").prop("ch ...

  9. Jquery全选单选功能

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx. ...

随机推荐

  1. 【数论】X problem

    X problem      X问题     Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...

  2. iOS 9的升级后的问题处理

    iOS 9变动影响SDK部分: 增加了bitCode编码格式,当SDK不支持bitCode时,用户集成时无法开启bitCode选项. 现象:用户集成SDK后无法编译通过,错误日志里包含了bitCode ...

  3. babel 解构赋值无法问题

    这个东西需要第二级, babel-preset-stage-2,然后再presets里引入stage-2的设置,再plugins离引入对应的插件 { "presets": [&qu ...

  4. Linux内核USB驱动【转】

    本文转载自:http://www.360doc.com/content/12/0321/14/8363527_196286673.shtml 注意,该文件是2.4的内核的驱动源文件,并不保证在2.6内 ...

  5. linux中oops信息的调试及栈回溯【转】

    本文转载自:http://blog.csdn.net/kangear/article/details/8217329 ========================================= ...

  6. 【已解决】新搭建的VPN服务器客户端无法正常连接

    昨天花了一天的时间,终于把VPN服务器搭建好了.但是客户端却一直提示无法拨号成功.查看VPN日志如下:[root@localhost log]# tail -f messages Jun 13 14: ...

  7. Linux:-杀进程的技巧

    <---kill进程的技巧---> 1.杀掉某个关键字的进程 pgrep -f 2.批量杀掉某个关键字的进程 pkill - "name" 3.批量杀掉多个关键字的进程

  8. js爬虫心得

    第一步:分析要爬的网站:包括是否需要登陆.点击下一页的网址变化.下拉刷新的网址变化等等 第二步:根据第一步的分析,想好爬这个网站的思路 第三步:爬好所需的内容 保存 爬虫过程中用到的一些包: (1)c ...

  9. JDBC的简单使用

    JDBC的英文全称是:  java Data Base Connectivity JDBC的主要作用:  (是java数据库连接技术的简称)JDBC是由一系列连接(Conneation).SQL语句( ...

  10. 【Python】Python3中的str和bytes

    参考文章:Python 3的bytes/str之别 len()函数计算的是str的字符数,如果换成bytes,len()函数就计算字节数 >>> len('ABC') 3 >& ...