jq pagination分页 全选、单选的思考

$().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(){}捕获

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