jtable插件api

官网2016-03-15

事例图：

一、客户端配置

1、

paging     boolean    default:false

　　配置是否分页，果断改为true。

2、

pageList    string    default:'normal' 

　 有两种样式可以选择：
    minimal
就是，只显示第一页最后一个上一页下一页图标，就是图上第一个红色框起来的前后各2个共4个翻页图标
    noraml
 就是，在minimal的基础上再把页码显示出来，图上就是第一个红色框起来的数字部分（1，2...12,13）翻页快捷图标

3、

pageSize    number    default:10 

　　每页显示的记录条数，默认10条有点少，一般改成20条

4、

pageSizes    array    default:[10,25,50,100,250,500]

　　 图中第三个红色框起来的下拉列表，一般改成自己喜欢的[20,30,40,50],默认每页可选择显示500条记录

5、

pageSizeChangeArea    boolean    default:true 

　 图中第三个红色框起来的下拉列表是否显示，
    如果不显示(false)，其实pageSizes的配置也就无意义了，用户无法选择
    有时候要的就是这种效果，定死了每页显示多少条，不许更改

6、

gotoPageArea     string default:combobox textbox/none 

　 图中第二个红色框起来，跳到第几页显示的样式，默认就是一个下拉列表
    万一页数太多会是什么效果呢？还是改成textbox吧，让用户自己输入
7、

sorting     boolean     default: false

　　sorting是否按一定顺序排列，默认为否。

二、具体用法

1、引入js和css

<link href="jquery-ui-1.10.1.custom.min.css" ref="stylesheet" type="text/css">
<link href="jqueryui/jtable_jqueryui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jtable.js"></script>

 

2、页面容器

<div id="main"></div>

3、配置

 <script type="text/javascript">
     $(document).ready(function () {
         $('#main').jtable({
             title: 'Table of people',
             actions: {
                 listAction: 'data/jtable.json'//url地址路径
             },
             fields: {
                 PersonId: {
                     key: true,
                     list: false
                 },
                 Name: {
                     title: 'Author Name',
                     width: '40%'
                 },
                 Age: {
                     title: 'Age',
                     width: '20%'
                 },
                 RecordDate: {
                     title: 'Record date',
                     width: '30%',
                     type: 'date',
                     create: false,
                     edit: false
                 }
             }
         });
      $('#main').jtable('load');//加载
     });
 </script>