Skip to content

Latest commit

 

History

History
157 lines (118 loc) · 8.56 KB

README.md

File metadata and controls

157 lines (118 loc) · 8.56 KB
Raw

bootstrap-pagingtable.js

bootstrap-pagingtable.js is a jQuery plugin for Twitter Bootstrap that renders data in a table with paging, sorting and editing.

Requirements

  • jQuery v1.8+
  • Bootstrap v3.0+ (bootstrap-v2-pagingtable.js is for Bootstrap v2)

Usage

Include required css and js files:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Include pagingtable js files:

<script src="bootstrap-pagingtable.js"></script>

Create a place holder in your HTML page:

<div><table id="sample-table" class="table"></table></div>

Configure your table:

var options = {
    colModels: [
        {name:'name', header:'Name', key:true, sortable:true},
        {name:'price', header:'Price', sortable:true},
        {name:'quantity', header:'Quantity', sortable:true}
    ],
    localData: {'records':[{'name':'orange', 'price':1.2, 'quantity':10}
        , {'name':'apple', 'price':2.0, 'quantity':8}
        , {'name':'banana', 'price':0.8, 'quantity':15}
        , {'name':'grape', 'price':0.4, 'quantity':30}
        , {'name':'strawberry', 'price':0.5, 'quantity':24}]},
    isPageable: true
};

$(function() {
    $('#sample-table').pagingtable(options);
});

Json Data Format

{page:0, pageSize:10, totalRecords:500, records:[{your data}]}

Options

Name Type Default Description
colModels array null To configure how the table displays data and functionalities of columns.
inlineEditing boolean false To enable inline editing.
isMultiSelect boolean false To select multi-rows.
isPageable boolean false To make the table pageable.
loadingDataOnInit boolean true If true, data will be loaded after the table is created.
loadOnce boolean false If true, data will be loaded from remote only once.
localData object null To load local data to table, not from remote.
pageSizeOptions array 10, 20, 50 To set how many records should be displayed in the table.
pagerLocation string bottom To set pager location (top or bottom).
paramNames object Parameter names which are used to send to remote server.
remote object null Settings related to remote server.
selectByCheckbox boolean false To enable selecting row by checkbox.

paramNames

paramNames can be changed to fix your need, default is: {page:'page', pageSize:'pageSize', records:'records', totalRecords:'totalRecords', sort:'sort', sortDir:'sortDir'}

colModels

Name Type Default Description
editable boolean false To make column editable.
editor string / function null To set edit type of column.
formHidden boolean false To hide this column in form-editing, not used in inline-editing.
formatter function null To custom content of column.
header string null The table header for this column.
hidden boolean false To hide this column.
isHiddenField boolean false To use a hidden field to keep column value and send back to server after editing.
key boolean false To be used as unique row id if no name property is id in data.
name string null The name property in data.
options object null To be used to display label when column type is select, radio or checkbox.
optionsUrl string null Using ajax to load data to be used to display label when column type is select, radio or checkbox.
sortable boolean false To make this column sortable.
sorter function null To custom sorting logic.
width string null To set column width.

remote

Name Type Default Description
url string null To be used to get data from server.
params string null To be used to send extra data to server.
method string null To set HTTP method for url.
editUrl string null The URL for updating data.
deleteUrl string null The URL for deleting data.
isRest boolean false The editUrl and deleteUrl are Rest style based on url. It will disable isMultiSelect.

Methods

.pagingtable('getSelectedRowId')

.pagingtable('getSelectedRowIds')

.pagingtable('getRowData', rowId)

.pagingtable('getAllRowData')

.pagingtable('getSelectedRowData')

.pagingtable('getMultiSelectedRowData')

.pagingtable('reload')

.pagingtable('addRow')

.pagingtable('updateRow', rowId)

.pagingtable('deleteRow', {id:'id or key column', displayColName:'column to display in confirm modal', separator:'to separate multiple row IDs, default is ,', paramName:'parameter to be sent to server, default is id or key name', method:'HTTP method, default is POST'}) (separator, paramName and method are ignored when remote.isRest is true)

Events

Event Parameters Description
created After table is created(include header and pager).
localLoaded Before loading data to table.
remoteLoad Before remote loading data.
remoteLoaded response After remote loading data but before loading data to table. response is the response from remote server.
remoteLoadError jqXHR Remote loading failed. response is the response from remote server.
load rowDataSet Before loading data to table (sorting and paging will trigger this event). rowDataSet is the row data array.
loaded After loading data to table.
clickRow rowId Click a row. rowId is the id of the clicked row.
dblclickRow rowId Double click a row.
contextmenuRow rowId Right click a row.
blur Click out of table.
add form Before sending added row data to remote server. form is a jQuery object containing added data.
added response After sending added row data to remote server. response is the response from remote server.
addError jqXHR Adding row failed. response is the response from remote server.
update form Before sending updated row data to remote server. form is a jQuery object containing updated data.
updated rowId, response After sending updated row data to remote server. rowId is the id of the updated row.
updateError rowId, jqXHR Updating row failed. rowId is the id of the updated row.
delete rowId/rowIds Before sending deleted row id to remote server. rowId is the id of the deleted row. If isMultiSelect is enabled, use rowIds to get the ids of the deleted rows.
deleted rowId/rowIds, response After sending deleted row id to remote server.
deleteError rowId/rowIds, jqXHR Deleting row failed.

=======