本节主要介绍表格的字段排序,支持普通表格和固定表头表格。

本框架的字段排序和分页都不是客户端处理,是通过将参数提交到服务端,处理好后再返回页面呈现。

提交到服务端的参数位置:排序字段(字段名和排序方向)及 分页参数(当前页和页大小)都通过页片中的#pagerForm提交。

#pagerForm需要内置4个隐藏的input存放上述参数,代码如下:

                    <input type="hidden" name="pageSize" value="${model.pageSize}">             
                    <input type="hidden" name="pageCurrent" value="${model.pageCurrent}">       
                    <input type="hidden" name="orderField" value="${param.orderField}">         
                    <input type="hidden" name="orderDirection" value="${param.orderDirection}"> 
                

注意1:如果页片中没有#pageForm将不能触发字段排序及分页,如果#pageForm没有放置参数input,框架会自动加入

注意2:如果修改了框架初始化参数pageInfo,请注意手动放置的参数input的name要与之一致,如果不一致框架将会自动加入pageInfo定义的参数input。

初始化

  • Data属性:th元素添加属性data-order-field="排序字段名"后,th会自动添加排序按钮,点击按钮即可触发排序操作。
    DOM示例: 打开order表格

    示例代码(仅表头部分):

                            <thead>
                                <tr>
                                    <th data-order-field="operation">ID</th>
                                    <th data-order-field="name">姓名</th>
                                    <th data-order-field="sex">性别</th>
                                    <th data-order-field="birthday">出生日期</th>
                                    <th data-order-field="birthplace">出生地</th>
                                </tr>
                            </thead>
                        
  • jQuery API:
                            $(th).tablefixed('setOrder', options)
                        

参数(options)

名称 类型 默认值 描述
orderField string null [必选] 发送到服务端的排序字段名称。
orderDirection string null [可选值( asc/desc )] 非发送到服务端的参数仅用于标示当前字段的排序方向。