bs_grid is a jQuery Datagrid plugin, based on Twitter Bootstrap. Advanced row selection, sorting, pagination and filtering. Fully customizable, responsive web design, localization.
Free and Open Source under MIT license.
Created for Bootstrap 3 (Bootstrap 2 supported)
- Responsive web design
- Fully configurable
- Get data in JSON format using AJAX (any server-side technology)
- A php class is provided for server side operations
- Change columns order
- Show/hide columns
- Style columns
- Simple column sorting with a click
- Flexible data sorting (multi-column)
- Single or multiple row selection
- Powerful pagination
- Powerful filters (Query builder)
- Multiple instances in same page
- Localization
Download: https://github.com/pontikis/bs_grid/
Demonstration:
Plugin homepage:
Implementation:
$(function() {
$("#demo_grid1").bs_grid({
ajaxFetchDataURL: "ajax_fetch_page_data.php",
row_primary_key: "customer_id",
columns: [
{field: "customer_id", header: "Code", visible: "no"},
{field: "lastname", header: "Lastname"},
{field: "firstname", header: "Firstname"},
{field: "email", header: "Email", visible: "no", "sortable": "no"},
{field: "gender", header: "Gender"},
{field: "date_updated", header: "Date updated"}
],
sorting: [
{sortingName: "Code", field: "customer_id", order: "none"},
{sortingName: "Lastname", field: "lastname", order: "ascending"},
{sortingName: "Firstname", field: "firstname", order: "ascending"},
{sortingName: "Date updated", field: "date_updated", order: "none"}
],
filterOptions: {
filters: [
{
filterName: "Lastname", "filterType": "text", field: "lastname", filterLabel: "Last name",
excluded_operators: ["in", "not_in"],
filter_interface: [
{
filter_element: "input",
filter_element_attributes: {"type": "text"}
}
]
},
{
filterName: "Gender", "filterType": "number", "numberType": "integer", field: "lk_genders_id", filterLabel: "Gender",
excluded_operators: ["equal", "not_equal", "less", "less_or_equal", "greater", "greater_or_equal"],
filter_interface: [
{
filter_element: "input",
filter_element_attributes: {type: "checkbox"}
}
],
lookup_values: [
{lk_option: "Male", lk_value: "1"},
{lk_option: "Female", lk_value: "2", lk_selected: "yes"}
]
},
{
filterName: "DateUpdated", "filterType": "date", field: "date_updated", filterLabel: "Datetime updated",
excluded_operators: ["in", "not_in"],
filter_interface: [
{
filter_element: "input",
filter_element_attributes: {
type: "text",
title: "Set the date and time using format: dd/mm/yyyy hh:mm:ss"
},
filter_widget: "datetimepicker",
filter_widget_properties: {
dateFormat: "dd/mm/yy",
timeFormat: "HH:mm:ss",
changeMonth: true,
changeYear: true,
showSecond: true
}
}
],
validate_dateformat: ["DD/MM/YYYY HH:mm:ss"],
filter_value_conversion: {
function_name: "local_datetime_to_UTC_timestamp",
args: [
{"filter_value": "yes"},
{"value": "DD/MM/YYYY HH:mm:ss"}
]
}
}
]
}
});
});Options:
| row_primary_key | String | row primary key |
| rowSelectionMode | String | row Selection Mode (false, single, multiple) |
| columns | Array | columns to display |
| sorting | Array | sorting rules |
| filters | Array | filters to apply |
Methods:
| displayGrid | Function | Returns : boolean – display data table |
| setPageColClass | Function | Returns : boolean – set column class |
| selectedRows | Function | Returns : mixed – get selected ids |
Screenshots:
