Update docs.

docs/docs.css

@@ -0,0 +1,136 @@
+body {
+    position: relative;
+    padding-top: 50px;
+}
+
+.bs-docs-nav {
+    text-shadow: 0 -1px 0 rgba(0,0,0,.15);
+    background-color: #563d7c;
+    border-color: #463265;
+    box-shadow: 0 1px 0 rgba(255,255,255,.1);
+}
+
+.bs-header {
+    font-size: 21px;
+    text-align: left;
+    padding: 30px 15px 40px;
+    text-shadow: 0 1px 0 rgba(0,0,0,.15);
+    color: #cdbfe3;
+    background-color: #563d7c;
+}
+
+.bs-docs-nav .navbar-nav > .active > a,
+.bs-docs-nav .navbar-nav > .active > a:hover {
+    color: #fff;
+    background-color: #463265;
+}
+
+.bs-sidenav {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-shadow: 0 1px 0 #fff;
+    background-color: #f7f5fa;
+    border-radius: 5px;
+}
+
+h1[id] {
+    padding-top: 80px;
+    margin-top: -45px;
+}
+
+/*
+ * Side navigation
+ *
+ * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+ * sections of docs content.
+ */
+
+/* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar.affix {
+    position: static;
+}
+
+/* First level of nav */
+.bs-sidenav {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    padding-top:    10px;
+    padding-bottom: 10px;
+    text-shadow: 0 1px 0 #fff;
+    background-color: #f7f5fa;
+    border-radius: 5px;
+}
+
+/* All levels of nav */
+.bs-sidebar .nav > li > a {
+    display: block;
+    color: #716b7a;
+    padding: 5px 20px;
+}
+.bs-sidebar .nav > li > a:hover,
+.bs-sidebar .nav > li > a:focus {
+    text-decoration: none;
+    background-color: #e5e3e9;
+    border-right: 1px solid #dbd8e0;
+}
+.bs-sidebar .nav > .active > a,
+.bs-sidebar .nav > .active:hover > a,
+.bs-sidebar .nav > .active:focus > a {
+    font-weight: bold;
+    color: #563d7c;
+    background-color: transparent;
+    border-right: 1px solid #563d7c;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-sidebar .nav .nav {
+    display: none; /* Hide by default, but at >768px, show it */
+    margin-bottom: 8px;
+}
+.bs-sidebar .nav .nav > li > a {
+    padding-top:    3px;
+    padding-bottom: 3px;
+    padding-left: 30px;
+    font-size: 90%;
+}
+
+.footer {
+    border-top: 1px solid #ddd;
+    padding: 40px 0;
+    text-align: center;
+    margin-top: 40px;
+    color: #777;
+}
+
+/* Show and affix the side nav when space allows it */
+@media (min-width: 992px) {
+    .bs-sidebar .nav > .active > ul {
+        display: block;
+    }
+    /* Widen the fixed sidebar */
+    .bs-sidebar.affix,
+    .bs-sidebar.affix-bottom {
+        width: 213px;
+    }
+    .bs-sidebar.affix {
+        position: fixed; /* Undo the static from mobile first approach */
+        top: 80px;
+    }
+    .bs-sidebar.affix-bottom {
+        position: absolute; /* Undo the static from mobile first approach */
+    }
+    .bs-sidebar.affix-bottom .bs-sidenav,
+    .bs-sidebar.affix .bs-sidenav {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+@media (min-width: 1200px) {
+    /* Widen the fixed sidebar again */
+    .bs-sidebar.affix-bottom,
+    .bs-sidebar.affix {
+        width: 263px;
+    }
+}

docs/docs.js

@@ -0,0 +1,266 @@
+$(function () {
+    $('#table').bootstrapTable({
+        columns: [
+            {field: 'name', title: 'Name', align: 'center', width: 60, sortable: true},
+            {field: 'type', title: 'Type', align: 'center', width: 60},
+            {field: 'description', title: 'Description', width: 400},
+            {field: 'default', title: 'Default', align: 'right', width: 180}
+        ],
+        data: [
+            {
+                name: 'classes',
+                type: 'String',
+                description: 'The class name of table.',
+                'default': 'table table-hover'
+            },
+            {
+                name: 'height',
+                type: 'Number',
+                description: 'The height of table.',
+                'default': 'undefined'
+            },
+            {
+                name: 'undefinedText',
+                type: 'String',
+                description: 'Defines the default undefined text.',
+                'default': '-'
+            },
+            {
+                name: 'striped',
+                type: 'Boolean',
+                description: 'True to stripe the rows.',
+                'default': 'false'
+            },
+            {
+                name: 'sortName',
+                type: 'String',
+                description: 'Defines which column can be sorted.',
+                'default': 'undefined'
+            },
+            {
+                name: 'sortOrder',
+                type: 'String',
+                description: 'Defines the column sort order, can only be "asc" or "desc".',
+                'default': 'asc'
+            },
+            {
+                name: 'columns',
+                type: 'Array',
+                description: 'The table columns config object, see column properties for more details.',
+                'default': '[]'
+            },
+            {
+                name: 'data',
+                type: 'Array',
+                description: 'The data to be loaded.',
+                'default': '[]'
+            },
+            {
+                name: 'method',
+                type: 'String',
+                description: 'The method type to request remote data.',
+                'default': 'get'
+            },
+            {
+                name: 'url',
+                type: 'String',
+                description: 'A URL to request data from remote site.',
+                'default': 'undefined'
+            },
+            {
+                name: 'queryParams',
+                type: 'Object',
+                description: 'When request remote data, sending additional parameters also.',
+                'default': '{}'
+            },
+            {
+                name: 'pagination',
+                type: 'Boolean',
+                description: 'True to show a pagination toolbar on datagrid bottom.',
+                'default': 'false'
+            },
+            {
+                name: 'sidePagination',
+                type: 'String',
+                description: 'Defines the side pagination of table, can only be "client" or "server".',
+                'default': 'client'
+            },
+            {
+                name: 'totalRows',
+                type: 'Number',
+                description: 'Defines the total rows of table, you need to set this option when the sidePagination option is set to "server".',
+                'default': 0
+            },
+            {
+                name: 'pageNumber',
+                type: 'Number',
+                description: 'When set pagination property, initialize the page number.',
+                'default': 1
+            },
+            {
+                name: 'pageSize',
+                type: 'Number',
+                description: 'When set pagination property, initialize the page size.',
+                'default': 10
+            },
+            {
+                name: 'pageList',
+                type: 'Array',
+                description: 'When set pagination property, initialize the page size selecting list.',
+                'default': '[10, 20, 30, 40, 50]'
+            }
+        ]
+    });
+    $('#column').bootstrapTable({
+        columns: [
+            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 60, sortable: true},
+            {field: 'type', title: 'Type', align: 'center', valign: 'middle', width: 60},
+            {field: 'description', title: 'Description', width: 400},
+            {field: 'default', title: 'Default', align: 'right', valign: 'middle', width: 180}
+        ],
+        data: [
+            {
+                name: 'radio',
+                type: 'Boolean',
+                description: 'True to show a radio. The radio column has fixed width.',
+                'default': 'false'
+            },
+            {
+                name: 'checkbox',
+                type: 'Boolean',
+                description: 'True to show a checkbox. The checkbox column has fixed width.',
+                'default': 'false'
+            },
+            {
+                name: 'field',
+                type: 'String',
+                description: 'The column field name.',
+                'default': 'undefined'
+            },
+            {
+                name: 'title',
+                type: 'String',
+                description: 'The column title text.',
+                'default': 'undefined'
+            },
+            {
+                name: 'align',
+                type: 'String',
+                description: 'Indicate how to align the column data. "left", "right", "center" can be used.',
+                'default': 'undefined'},
+            {
+                name: 'valign',
+                type: 'String',
+                description: 'Indicate how to align the cell data. "top", "middle", "bottom" can be used.',
+                'default': 'undefined'
+            },
+            {
+                name: 'width',
+                type: 'Number',
+                description: 'The width of column. If not defined, the width will auto expand to fit its contents.',
+                'default': 'undefined'},
+            {
+                name: 'sortable',
+                type: 'Boolean',
+                description: 'True to allow the column can be sorted.',
+                'default': 'false'
+            },
+            {
+                name: 'order',
+                type: 'String',
+                description: 'The default sort order, can only be "asc" or "desc".',
+                'default': 'asc'
+            },
+            {
+                name: 'formatter',
+                type: 'Function',
+                description: 'The cell formatter function, take two parameters: <br />value: the field value. <br />row: the row record data.',
+                'default': 'undefined'
+            },
+            {
+                name: 'sorter',
+                type: 'Function',
+                description: 'The custom field sort function that used to do local sorting, take two parameters: <br />a: the first field value.<br /> b: the second field value.',
+                'default': 'undefined'
+            }
+        ]
+    });
+    $('#event').bootstrapTable({
+        columns: [
+            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 100, sortable: true},
+            {field: 'parameter', title: 'Parameter', align: 'center', valign: 'middle', width: 100, sortable: true},
+            {field: 'description', title: 'Description', width: 400, sortable: true}
+        ],
+        data: [
+            {name: 'onClickRow', parameter: 'row', description: 'Fires when user click a row, the parameters contains: <br />row: the record corresponding to the clicked row'},
+            {name: 'onSort', parameter: 'name, order', description: 'Fires when user sort a column, the parameters contains: <br />name: the sort column field name<br />order: the sort column order'}
+        ],
+        onClickRow: function (row) {
+            console.log(row);
+        },
+        onSort: function (name, order) {
+            console.log(name, order);
+        }
+    });
+    $('#method').bootstrapTable({
+        columns: [
+            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 100},
+            {field: 'parameter', title: 'Parameter', align: 'center', valign: 'middle', width: 100},
+            {field: 'description', title: 'Description', width: 400}
+        ]
+    }).bootstrapTable('load', [
+            {name: 'getSelections', parameter: 'none', description: 'Return all selected rows, when no record selected, am empty array will return.'},
+            {name: 'load', parameter: 'data', description: 'Load the data to table.'}
+        ]).bootstrapTable('append', [
+            {name: 'append', parameter: 'data', description: 'Append the data to table.'},
+            {name: 'mergeCells', parameter: 'options', description: 'Merge some cells to one cell, the options contains following properties:'},
+            {name: 'mergeCells', parameter: 'options', description: 'index: the row index.'},
+            {name: 'mergeCells', parameter: 'options', description: 'field: the field name.'},
+            {name: 'mergeCells', parameter: 'options', description: 'rowspan: the rowspan count to be merged.'},
+            {name: 'mergeCells', parameter: 'options', description: 'colspan: the colspan count to be merged.'},
+            {name: 'checkAll', parameter: 'none', description: 'Check all current page rows.'},
+            {name: 'uncheckAll', parameter: 'none', description: 'Uncheck all current page rows.'}
+        ]).bootstrapTable('mergeCells', {
+            index: 3,
+            field: 'name',
+            rowspan: 5
+        }).bootstrapTable('mergeCells', {
+            index: 3,
+            field: 'parameter',
+            rowspan: 5
+        });
+
+    var $window = $(window);
+    var $body = $(document.body);
+
+    var navHeight = $('.navbar').outerHeight(true) + 10;
+
+    $body.scrollspy({
+        target: '.bs-sidebar',
+        offset: navHeight
+    });
+
+    $window.on('load', function () {
+        $body.scrollspy('refresh')
+    });
+
+    // affix
+    setTimeout(function () {
+        var $sideBar = $('.bs-sidebar');
+
+        $sideBar.affix({
+            offset: {
+                top: function () {
+                    var offsetTop = $sideBar.offset().top;
+                    var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10);
+                    var navOuterHeight = $('.bs-docs-nav').height();
+
+                    return (this.top = offsetTop - navOuterHeight - sideBarMargin);
+                },
+                bottom: function () {
+                    return (this.bottom = $('.bs-footer').outerHeight(true));
+                }
+            }
+        });
+    }, 100)
+});

index.html

@@ -1,176 +1,99 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
+<head>
+    <meta charset="utf-8">
     <title>Bootstrap Table</title>
-    <meta name="author" content="zhixin" />
-    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
-    <link rel="stylesheet" href="//wenzhixin.net.cn/assets/bootstrap2/css/bootstrap.css" />
-    <link rel="stylesheet" href="//wenzhixin.net.cn/assets/bootstrap2/css/bootstrap-responsive.css" />
-    <link rel="stylesheet" href="//wenzhixin.net.cn/assets/bootstrap2/css/docs.css" />
-    <link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css" />
-    <link rel="stylesheet" href="src/bootstrap-table.css" />
+    <meta name="author" content="zhixin">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="src/bootstrap-table.css">
+    <link rel="stylesheet" href="docs/docs.css">
+    <link rel="stylesheet" href="//wenzhixin.net.cn/css/fork.css">
     <!--[if lt IE 9]>
-      <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
-      <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
+    <script src="//wenzhixin.net.cn/js/html5shiv.js"></script>
+    <script src="//wenzhixin.net.cn/js/respond.min.js"></script>
     <![endif]-->
-    <style>
-      body {
-        padding-bottom: 60px;
-      }
-    </style>
-  </head>
-  <body data-spy="scroll" data-target=".bs-docs-sidebar">
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="#">
-            Bootstrap Table
-          </a>
+</head>
+<body>
+<a class="sr-only" href="#content">Skip to main content</a>
+<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="#">
+                Bootstrap Table
+            </a>
         </div>
-      </div>
+        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+            <ul class="nav navbar-nav">
+                <li class="active">
+                    <a href="index.html">Documentation</a>
+                </li>
+                <li>
+                    <a href="examples.html">Examples</a>
+                </li>
+            </ul>
+        </nav>
     </div>
+</header>
+<div class="bs-header" id="content">
     <div class="container">
-      <div class="row">
-        <div class="span3 bs-docs-sidebar">
-          <ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix">
-              <li><a href="#properties"><i class="icon-chevron-right"></i> Table Properties</a></li>
-              <li><a href="#columns"><i class="icon-chevron-right"></i> Column Properties</a></li>
-              <li><a href="#events"><i class="icon-chevron-right"></i> Events</a></li>
-              <li><a href="#methods"><i class="icon-chevron-right"></i> Methods</a></li>
-              <li><a href="#examples"><i class="icon-chevron-right"></i> Examples</a></li>
-            </ul>
+        <h1>Bootstrap Table</h1>
+        <p>The table displays data in a tabular format and offers rich support to select, sort. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.</p>
+    </div>
+</div>
+<div class="container">
+    <div class="row">
+        <div class="col-md-3">
+            <div class="bs-sidebar" role="complementary">
+                <ul class="nav bs-sidenav">
+                    <li><a href="#properties">Table Properties</a></li>
+                    <li><a href="#columns">Column Properties</a></li>
+                    <li><a href="#events">Events</a></li>
+                    <li><a href="#methods">Methods</a></li>
+                </ul>
+            </div>
         </div>
-        <div class="span9">
-          <section id="properties">
-            <h3>Table Properties:</h3>
-            <table id="table"></table>
-          </section>
-          <section id="columns">
-            <h3>Column Properties:</h3>
-            <table id="column"></table>
-          </section>
-          <section id="events">
-            <h3>Events:</h3>
-            <table id="event"></table>
-          </section>
-          <section id="methods">
-            <h3>Methods:</h3>
-            <table id="method"></table>
-          </section>
-          <section id="examples">
-            <h3>Examples:</h3>
-            <table id="example"></table>
-          </section>
+        <div class="col-md-9" role="main">
+            <section>
+                <div class="page-header">
+                    <h1 id="properties">Table Properties:</h1>
+                </div>
+                <table id="table"></table>
+            </section>
+            <section>
+                <div class="page-header">
+                    <h1 id="columns">Column Properties:</h1>
+                </div>
+                <table id="column"></table>
+            </section>
+            <section>
+                <div class="page-header">
+                    <h1 id="events">Events:</h1>
+                </div>
+                <table id="event"></table>
+            </section>
+            <section>
+                <div class="page-header">
+                    <h1 id="methods">Methods:</h1>
+                </div>
+                <table id="method"></table>
+            </section>
         </div>
-      </div>
     </div>
-    
-    <a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>
-    
-    <script type="text/javascript" src="//wenzhixin.net.cn/js/jquery.min.js"></script>
-    <script type="text/javascript" src="//wenzhixin.net.cn/js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="src/jquery.bootstrap.table.js"></script>
-    <script type="text/javascript">
-      $(function() {
-        $('#table').bootstrapTable({
-          columns: [
-            {field: 'name', title: 'Name', align: 'center', width: 60, sortable: true},
-            {field: 'type', title: 'Type', align: 'center', width: 60},
-            {field: 'description', title: 'Description', width: 400},
-            {field: 'default', title: 'Default', align: 'right', width: 180}
-          ],
-          data: [
-            {name: 'height', type: 'Number', description: 'The height of table.', 'default': 'undefined'},
-            {name: 'sortName', type: 'String', description: 'Defines which column can be sorted.', 'default': 'undefined'},
-            {name: 'undefinedText', type: 'String', description: 'Defines the default undefined text.', 'default': undefined},
-            {name: 'sortOrder', type: 'String', description: 'Defines the column sort order, can only be "asc" or "desc".', 'default': 'asc'},
-            {name: 'columns', type: 'Array', description: 'The table columns config object, see column properties for more details.', 'default': '[]'},
-            {name: 'data', type: 'Array', description: 'The data to be loaded.', 'default': '[]'}
-          ]
-        });
-        $('#column').bootstrapTable({
-          sortName: 'name',
-          sortOrder: 'asc',
-          columns: [
-            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 60, sortable: true},
-            {field: 'type', title: 'Type', align: 'center', valign: 'middle', width: 60},
-            {field: 'description', title: 'Description', width: 400},
-            {field: 'default', title: 'Default', align: 'right', valign: 'middle', width: 180}
-          ],
-          data: [
-            {name: 'field', type: 'String', description: 'The column field name.', 'default': 'undefined'},
-            {name: 'title', type: 'String', description: 'The column title text.', 'default': 'undefined'},
-            {name: 'align', type: 'String', description: 'Indicate how to align the column data. "left", "right", "center" can be used.', 'default': 'undefined'},
-            {name: 'valign', type: 'String', description: 'Indicate how to align the cell data. "top", "middle", "bottom" can be used.', 'default': 'undefined'},
-            {name: 'width', type: 'Number', description: 'The width of column. If not defined, the width will auto expand to fit its contents.', 'default': 'undefined'},
-            {name: 'sortable', type: 'Boolean', description: 'True to allow the column can be sorted.', 'default': 'false'},
-            {name: 'order', type: 'String', description: 'The default sort order, can only be "asc" or "desc".', 'default': 'asc'},
-            {name: 'formatter', type: 'Function', description: 'The cell formatter function, take two parameters: <br />value: the field value. <br />row: the row record data.', 'default': 'undefined'},
-            {name: 'sorter', type: 'Function', description: 'The custom field sort function that used to do local sorting, take two parameters: <br />a: the first field value.<br /> b: the second field value.', 'default': 'undefined'}
-          ]
-        });
-        $('#event').bootstrapTable({
-          columns: [
-            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 100, sortable: true},
-            {field: 'parameter', title: 'Parameter', align: 'center', valign: 'middle', width: 100, sortable: true},
-            {field: 'description', title: 'Description', width: 400, sortable: true}
-          ],
-          data: [
-            {name: 'onClickRow', parameter: 'row', description: 'Fires when user click a row, the parameters contains: <br />row: the record corresponding to the clicked row'},
-            {name: 'onSort', parameter: 'name, order', description: 'Fires when user sort a column, the parameters contains: <br />name: the sort column field name<br />order: the sort column order'}
-          ],
-          onClickRow: function(row) {
-            console.log(row);
-          },
-          onSort: function(name, order) {
-            console.log(name, order);
-          }
-        });
-        $('#method').bootstrapTable({
-          columns: [
-            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 100},
-            {field: 'parameter', title: 'Parameter', align: 'center', valign: 'middle', width: 100},
-            {field: 'description', title: 'Description', width: 400}
-          ]
-        }).bootstrapTable('load', [
-          {name: 'load', parameter: 'data', description: 'Load the data to table.'}
-        ]).bootstrapTable('append', [
-          {name: 'append', parameter: 'data', description: 'Append the data to table.'},
-          {name: 'mergeCells', parameter: 'options', description: 'Merge some cells to one cell, the options contains following properties:'},
-          {name: 'mergeCells', parameter: 'options', description: 'index: the row index.'},
-          {name: 'mergeCells', parameter: 'options', description: 'field: the field name.'},
-          {name: 'mergeCells', parameter: 'options', description: 'rowspan: the rowspan count to be merged.'},
-          {name: 'mergeCells', parameter: 'options', description: 'colspan: the colspan count to be merged.'}
-        ]).bootstrapTable('mergeCells', {
-          index: 2, 
-          field: 'name',
-          rowspan: 5
-        }).bootstrapTable('mergeCells', {
-          index: 2, 
-          field: 'parameter',
-          rowspan: 5
-        });
-        
-        var data = [];
-        for (var i = 100; i < 1000; i++) {
-          data.push({code: '' + i, name: 'hello ' + i, price: '$' + i});
-        }
-        $('#example').bootstrapTable({
-          height: 200,
-          sortName: 'code',
-          sortOrder: 'asc',
-          columns: [
-            {field: 'code', title: 'Code', align: 'left', width: 200, sortable: true},
-            {field: 'name', title: 'Name', align: 'center', width: 100},
-            {field: 'price', title: 'Price', align: 'right', valign: 'middle', width: 200, formatter: function(value, row) {
-              return 'the price is: ' + value;
-            }}
-          ],
-          data: data
-        });
-      });
-    </script>
-    <script src="//wenzhixin.net.cn/js/analytics.js"></script>
-  </body>
+</div>
+
+<a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>
+
+<div class="footer">
+    <p>
+        Copyright © 2012-2014 wenzhixin.net.cn
+    </p>
+</div>
+
+<script src="assets/jquery.min.js"></script>
+<script src="assets/bootstrap/js/bootstrap.min.js"></script>
+<script src="src/bootstrap-table.js"></script>
+<script src="docs/docs.js"></script>
+<script src="//wenzhixin.net.cn/js/analytics.js"></script>
+</body>
 </html>

src/bootstrap-table.js

@@ -43,20 +43,23 @@
 
     BootstrapTable.DEFAULTS = {
         classes: 'table table-hover',
-        striped: true,
-        undefinedText: '-',
         height: undefined,
+        undefinedText: '-',
+        sortName: undefined,
+        sortOrder: 'asc',
+        striped: false,
         columns: [],
         data: [],
         method: 'get',
-        url: '',
+        url: undefined,
         queryParams: {},
-        pagination: true,
+        pagination: false,
         sidePagination: 'client', // client or server
         totalRows: 0, // server side need to set
         pageNumber: 1,
-        pageSize: 20,
+        pageSize: 10,
         pageList: [10, 20, 30, 40, 50],
+
         onSort: function(name, order) {return false;}
     };