DataTables

DataTables Examples

HTML

<script src="http://www.primefaces.org/primeui/primeui/js/core/core.js"></script>
<link rel="stylesheet" href="http://www.primefaces.org/primeui/primeui/css/core/core.css">
<link rel="stylesheet" href="http://www.primefaces.org/primeui/primeui/css/datatable/datatable.css">
<script src="http://www.primefaces.org/primeui/primeui/js/datatable/datatable.js"></script>
<script src="http://www.primefaces.org/primeui/primeui/js/paginator/paginator.js"></script>
<link rel="stylesheet" href="http://www.primefaces.org/primeui/primeui/css/paginator/paginator.css">
<div id="tbllocal"></div>

JavaScript

var ourJson1 = [{
    'highlight': false,
    'brand': 'Volkswagen',
    'year': 2012,
    'color': 'White',
    'vin': 'dsad231ff'
}, {
    'highlight': true,
    'brand': 'Audi',
    'year': 2011,
    'color': 'Black',
    'vin': 'gwregre345'
}, {
    'highlight': false,
    'brand': 'Renault',
    'year': 2005,
    'color': 'Gray',
    'vin': 'h354htr'
}, {
    'highlight': false,
    'brand': 'Bmw',
    'year': 2003,
    'color': 'Blue',
    'vin': 'j6w54qgh'
}, {
    'highlight': false,
    'brand': 'Mercedes',
    'year': 1995,
    'color': 'White',
    'vin': 'hrtwy34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2005,
    'color': 'Black',
    'vin': 'jejtyj'
}, {
    'highlight': true,
    'brand': 'Honda',
    'year': 2012,
    'color': 'Yellow',
    'vin': 'g43gr'
}, {
    'highlight': false,
    'brand': 'Chevrolet',
    'year': 2013,
    'color': 'White',
    'vin': 'greg34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2000,
    'color': 'Black',
    'vin': 'h54hw5'
}, {
    'highlight': false,
    'brand': 'Mazda',
    'year': 2013,
    'color': 'Red',
    'vin': '245t2s'
}];

$('#tbllocal').puidatatable({
    caption: 'Local Datasource',
    columns: [{
        field: 'vin',
        headerText: 'Vin',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'vin');
        }
    }, {
        field: 'brand',
        headerText: 'Brand',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'brand');
        }
    }, {
        field: 'year',
        headerText: 'Year',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'year');
        }
    }, {
        field: 'color',
        headerText: 'Color',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'color');
        }
    }],
    datasource: ourJson1,
});

function...