Welcome to Brnfullstack

Sunday, August 10, 2014

jQuery Bootgrid Plugin example

jQuery Bootgrid Plugin

July 17, 2014 | Bootstrap, Plugins, Tables

jQuery Bootgrid is a UI component written for jQuery and Bootstrap (Bootstrap isn’t necessarily required).A grid control especially designed for bootstrap.
Everything you need to start quickly is:

Include jQuery, jQuery Bootgrid and Bootstrap libraries in your HTML code.
Define your table layout and your data columns by adding the data-column-id attribute.
Then select the previously defined table element represents your data table and initialize the bootgrid plugin.
Specify your data url used to fill your data table.

Wholly : jQuery plugin to highlight Table Rows and Columns

July 10, 2014 | Plugins, Tables

A jQuery plugin to highlight table rows and columns on hover with rowspan and colspan support.

Bootstrap Table with jQuery

July 2, 2014 | Ajax, Bootstrap, jSON, Plugins, Tables

The table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.
Features:

Created for Bootstrap 3 (Bootstrap 2 supported)
Responsive web design
Scrollable Table with fixed headers
Fully configurable
Via data attributes
Show/Hide columns
Show/Hide headers
Get data in JSON format using AJAX
Simple column sorting with a click
Format column
Single or multiple row selection
Powerful pagination
Card view
Localization

Jquery grid example using csv file

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                });
            </script>
        </div>


</body>
</html>