https://github.com/sheryever/jtableattributes-experimental
https://github.com/sheryever/jtableattributes-experimental
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sheryever/jtableattributes-experimental
- Owner: sheryever
- Created: 2016-09-05T04:11:15.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-31T18:18:35.000Z (about 2 years ago)
- Last Synced: 2025-01-11T06:16:22.225Z (5 months ago)
- Language: CSS
- Size: 734 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JtableAttributes-Experimental
An experiment to cofigure jtable from a html table.
Jtable extension [jquery.jtable.attributableconfig.js](JtableAttributes/Scripts/jtable/extensions/jquery.jtable.attributableconfig.js)
```html
OrderId
Firm
Ship Country
Order Date
Shipped
OrderId
Ship Name
Ship Country
Order Date
Shipped
```
## Asp.net MVC
```C#
public class HomeController : Controller
{
[HttpPost]
public ActionResult Orders()
{
return Json(new {Result = "OK", Records = GetOrders().Take(10)});
}
}
```
## JSON Result
```json
{
"Result": "OK",
"Records": [
{ "OrderId": 10, "ShipName": "Ship 10", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475067648987)\/", "Shipped": true },
{ "OrderId": 11, "ShipName": "Ship 11", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475154048987)\/", "Shipped": false },
{ "OrderId": 12, "ShipName": "Ship 12", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475240448987)\/", "Shipped": true },
{ "OrderId": 13, "ShipName": "Ship 13", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475326848987)\/", "Shipped": false },
{ "OrderId": 14, "ShipName": "Ship 14", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475413248987)\/", "Shipped": true },
{ "OrderId": 15, "ShipName": "Ship 15", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475499648987)\/", "Shipped": true },
{ "OrderId": 16, "ShipName": "Ship 16", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475586048987)\/", "Shipped": false },
{ "OrderId": 17, "ShipName": "Ship 17", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475672448987)\/", "Shipped": true },
{ "OrderId": 18, "ShipName": "Ship 18", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475758848987)\/", "Shipped": false },
{ "OrderId": 19, "ShipName": "Ship 19", "ShipCountry": "Pakistan", "OrderDate": "\/Date(1475845248987)\/", "Shipped": true }]
}
```
## javascript code
```javascript
$(function() {
$('#OrdersJTable').jtable();
$('#OrdersJTable').jtable('load');
$('#OrdersJTable2').jtable();
$('#OrdersJTable2').jtable('load');
});
```
### jtable with paging
```html
OrderId
Ship Name
Ship Country
Order Date
Shipped
```
## Asp.net MVC
```C#
public class HomeController : Controller
{
[HttpPost]
public ActionResult OrdersWithPaging(int jtStartIndex, int jtPageSize)
{
var order = GetOrders();
//var startIndex = jtStartIndex+jtPageSize;
return Json(
new { Result = "OK"
, Records = GetOrders().Skip(jtStartIndex).Take(jtPageSize)
, TotalRecordCount = order.Count });
}
}
```
## Adding jtable other options (functions/events)
### Html
``` Html
OrderId
Ship Name
Ship Country
Order Date
Shipped
```
### JavaScript
```javascript
$(function() {
$('#OrderJtableWithOtherOptions').jtable({
fields: {
ShipName: {
display: function (data) {
return '<a href="/firmsDetail?firmName=' + data.record.OrderId + '">' + data.record.ShipName + '</a>';
}
}
},
rowInserted: function(event, data){
if (data.record.Shipped) {
data.row.css('color', 'green');
}
}
});
$('#OrderJtableWithOtherOptions').jtable('load');
});
```
All jtable and jtable fields options are supported except functions / delegates / events.
Jtable options must have the `data-jt-` prefix in html.
##### General Options
| Jtable Options | jt-attributes | Remarks |
|---------------------------------|---------------------|--------------------------------------|
|actions.listAction | list-action | |
|actions.createAction | create-action | |
|actions.updateAction | update-action | |
|actions.deleteAction | delete-action | |
|animationsEnabled | animations-enabled | |
|columnResizable | column-resizable | |
|columnSelectable | column-selectable | |
|defaultDateFormat | default-date-format | |
|defaultSorting | default-sorting | |
|dialogShowEffect | dialog-show-effect | |
|dialogShowEffect | dialog-show-effect | |
|dialogHideEffect | animations-enabled | |
|gotoPageArea | goto-page-area | |
|jqueryuiTheme | jquery-ui-theme | |
|loadingAnimationDelay | loading-animation-delay | |
|multiselect | multi-select | |
|multiSorting | multi-sorting | |
|paging | paging | |
|pageList | page-list | |
|pageSize | page-size | |
|pageSizes | page-sizes | example = `