jquery table

最後更新: 2015-05-14

常見的選擇

 

Bootgrid

 

Server-side data loading (async)
    Load your data asynchronously via AJAX by calling e.g. a REST service.

Dynamic Manipulation
    Append, clear or remove rows dynamically via API.

Easy Navigation
    A powerful pagination & search field helps you to navigate through your data easily.

Client-side data loading (in-memory)
    Turn your basic table into a table with advanced functionality (e.g. sorting, paging, searching and much more).

 

Download:

jquery.bootgrid.min.css # 4kb
jquery.bootgrid.min.js # 22kb

 


Examples

 

把一個 table 直接變成 bootgrid

HTML

<table id="grid-basic" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
        <th data-column-id="id" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1</td>
        <td>test@example.com</td>
        <td>2015-01-21</td>
        </tr>
        ...
    </tbody>
</table>

JavaScript

$("#grid-basic").bootgrid();

Column Settings

sortable         # Enables sorting. Default value is true.

align              # Sets the text alignment of table body cells. Default value is left.

headerAlign    # Sets the text alignment of table header cells. Default value is left.

order              # Specifies the sort order. Default value is "" (asc / desc)

其本 UI 設定

隱藏 Search bar

用 jquery:

$('.search').hide();

templates:

templates: {
    search: ""
}

rowCount:

"rowCount": [8, 10, -1]

column width:

  • data-css-class
  • data-css-header-class
< ... data-header-css-class="eidColumn" ... >

<style type="text/css">
    .eidColumn
    {
        width: 80px;
    }
</style>

 

用 data api (post & get json)拎 Data

via data attributes

HTML

<table id="grid-data-api" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="/api/data/basic">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
</table>

JavaScript

設定了 data-toggle="bootgrid" 就不用寫 js

$("#grid-data-api").bootgrid();

POST Body (Request)

current=1&rowCount=10&sort[received]=desc&searchPhrase=

JSON (Response)

    {
        "current": 1,
        "rowCount": 10,
        "rows": [
            {
                "id": 19,
                "sender": "123@test.de",
                "received": "2014-05-30T22:15:00"
            },
            {
                "id": 14,
                "sender": "123@test.de",
                "received": "2014-05-30T20:15:00"
            },
                ...
            ],
        "total": 1123
    }

via js

html

    <table id="grid-data" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
                <th data-column-id="link" data-formatter="link" data-sortable="false">Link</th>
            </tr>
        </thead>
    </table>

js

   $("#grid-data").bootgrid({
        ajax: true,
        post: function ()
        {
            /* To accumulate custom parameter with the request object */
            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },
        url: "/api/data/basic",
        formatters: {
            "link": function(column, row)
            {
                return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
            }
        }
    });

POST

current=1&rowCount=10&sort[sender]=asc&searchPhrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed

JSON (Response)

    {
      "current": 1,
      "rowCount": 10,
      "rows": [
        {
          "id": 19,
          "sender": "123@test.de",
          "received": "2014-05-30T22:15:00"
        },
        {
          "id": 14,
          "sender": "123@test.de",
          "received": "2014-05-30T20:15:00"
        },
        ...
      ],
      "total": 1123
    }

 

Command Buttons

HTML

    <table id="grid-data" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
    </table>

JS

var grid = $("#grid-command-buttons").bootgrid({
    ajax: true,
    post: function ()
    {
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    url: "/api/data/basic",
    

    formatters: {
        "commands": function(column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-pencil\"></span></button> " +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-remove\"></span></button>";
            }
    }


    }).on("loaded.rs.jquery.bootgrid", function()
        {
            /* Executes after data is loaded and rendered */
            grid.find(".command-edit").on("click", function(e)
                {
                    alert("You pressed edit on row: " + $(this).data("row-id"));
                }).end().find(".command-delete").on("click", function(e)
                    {
                        alert("You pressed delete on row: " + $(this).data("row-id"));
                    });
        });

這裡的 button 是用 formatter 劃出來的

formatter = Function

$("#grid").bootgrid({
    formatters: {
        commands: function (column, row)
        {
            /* "this" is mapped to the grid instance */
            return "html code";
        }
    }
});

 


 

.end()

Description: End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

Returns: jQuery