您的位置:首页 > Web前端 > BootStrap

bootstrap table + spring mvc 服务的分页

2015-12-28 10:19 483 查看
<table id='applyNoTable' data-events='operateEvents' ></table>

$("#applyNoTable").bootstrapTable({

//        url:"/apply/findByAll", //请求url

        method: 'get', //服务的必须设置为get

        detailView:true, //显示行详细信息

    //    sidePagination:'server',//设置为服务器端分页

        idField:"id", //标识字段

        pagination:true, //显示分页

        toolbar:"#toolbar", // 工具栏

        toolbarAlign:"left", //工具栏位置

        queryParamsType:"limit", //请求附带其他参数必须设置为 limit

        queryParams:queryParamsfun, //附加参数方法

        showRefresh:true, //显示刷新

        showColumns:true,//提供选择进行切换显示那些列

        iconsPrefix:"fa", //定义是那一种类型的图标

        sortName:"id", //默认排序的列

        clickToSelect:true, //点击行选中 多选框或单选框

        icons:{ //对应的图标样式

              detailClose: "fa-minus",

              columns:"fa-bars",

              refresh:"    fa-refresh",

              detailOpen: "fa-plus"

            },

        detailFormatter:detailFormatter, //显示详情的方法

        columns: [{checkbox:true},{

            field: 'id',

            align:"center",

            title: '申请编号',

            sortable:true, //是否允许排序

            order:"asc", //默认排序

            visible:true //是否具有收起效果

        },{

            field: 'userId.id',

            align:"center",

            title: '用户编号',

            visible:false

        },{

            field: 'userId.loginName',

            align:"center",

            title: '申请人',

            visible:true

        }, {

            field: 'instance',

            align:"center",

            visible:true,

            title: '实例'

        }, {

            field: 'io',

            align:"center",

            title: 'I/O 优化',

            visible:true

        }, {

            field: 'specifications',

            align:"center",

            visible:true,

            formatter:function(value, row, index){

                

                value = '<div class="my-text-overflow">'+value+'</div>';

                

                return value;

            },

            title: '规格'

        }, {

            field: 'broadband',

            align:"center",

            visible:true,

            sortable:true,

            order:"asc",

            title: '宽带'

        }, {

            field: 'mirror',

            align:"center",

            visible:true,

            title: '镜像'

        }, {

            field: 'disk',

            align:"center",

            visible:true,

            sortable:true,

            order:"asc",

            title: '磁盘Gib'

        }, {

            field: 'number',

            align:"center",

            visible:true,

            title: '数量'

        }, {

            field: 'operate',

            title: '操作',

            align: 'center',

            events:'operateEvents',

            formatter: operateFormatter //最后一列显示内容

        }],<
4000
br />
        onClickRow:function(row,tr){

            

            ids =row.id + "," + ids;

         }

    });

    

    

    //查询参数

    function queryParamsfun(params){

        

        params['applyYesorNo'] = flag;

        params['specifications'] = $("input[name='specifications']").val();

        params['io'] = $("input[name='io']").val();

        params['instance'] = $("input[name='instance']").val();

        params['broadband']= $("input[name='broadband']").val();

        params['mirror'] = $("input[name='mirror']").val();

        params['disk'] = $("input[name='disk']").val();

        params['number'] = $("input[name='number']").val();

        params['applyParameter'] = $("#seachApplyLucenu").val();

        

        return params;

    }

    

    //点击  + 图标 显示行详细记录

    function detailFormatter(index, row) {

        var html = [];

        $.each(row, function (key, value) {

            

            if(key == "invalid"){

                

                return true;

            }

            if(key == "userId"){

                

                key = "userName";

                value = value.loginName;

            }

            

            html.push('<p><b class="col-lg-2">' + key + ':</b> <input type="text" value="' + value + '" disabled/></p>');

        });

        return html.join('');

    }

    

    //每行后面显示操作的列

    function operateFormatter(value, row, index) {

        

        if(flag == "已审批"){

            

            return [

                    '<a class="remove" href="javascript:void(0)" title="删除">',

                    '<i class="fa fa-times fa-1x"></i>',

                    '</a>'

                ].join('');

            

        }

        

        return [

            '<a class="like" href="javascript:void(0)" title="处理">',

            '<i class="fa fa-pencil-square-o fa-1x"></i>',

            '</a>  ',

            '<a class="remove" href="javascript:void(0)" title="删除">',

            '<i class="fa fa-times fa-1x"></i>',

            '</a>'

        ].join('');
    }

@RequestMapping("/findByAll")

    @ResponseBody

    public Object findByAll(Integer limit , Integer offset,final Apply apply,final String applyParameter,String order,String sort){

        

        try {

            

/*            Sort sorts = null;

            

            if("asc".equals(order)){

                

                sorts = new Sort(Sort.Direction.ASC,sort);

                

            }else{

                

                sorts = new Sort(Sort.Direction.DESC,sort);

                

            }*/

            

            apply.setApplyYesorNo("未审批");

            

            List<Apply> findAll = applyDao.findAll(new Specification<Apply>() {

                

                @Override

                public Predicate toPredicate(Root<Apply> root, CriteriaQuery<?> query,

                        CriteriaBuilder cb) {

                    

                     //path转化

                    List<Predicate> orPredicates = new ArrayList<Predicate>();

                    

                    if(applyParameter != null && !("".equals(applyParameter.trim()))){

                        

                        Join<Apply,User> user = root.join(root.getModel().//

                                  getSingularAttribute("userId", User.class),javax.persistence.criteria.JoinType.LEFT);

                        Path<String> loginName = user.get("loginName");

                        Predicate LoginName =cb.like(loginName,"%"+applyParameter+"%");

                        orPredicates.add(LoginName);

                        

                    }

                    //encapsulationSQL 此方法是自己封装的 和上面的if内容一制 ,只是属性不一样

                    orPredicates = encapsulationSQL(orPredicates, root, cb, apply);

                    

                    Predicate p = cb.and(orPredicates.toArray(new Predicate[orPredicates.size()]));

                    

                    query.where(p);

                    return null;

                }

            });

/*            

            ObjectMapper objectMapper = new ObjectMapper();

            

            String str  = objectMapper.writeValueAsString(findAll.getContent());

            

            String strApply = JsonUtil.getJson(String.valueOf(findAll.getTotalElements()), str);*/

            

            return findAll;

            

        } catch (Exception e) {

            

            e.printStackTrace();

        }

        

        return "";

    }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: