首頁 » HTML

jquery table

由 datahunter 在 日, 18/01/2015 - 23:04 發表

最後更新: 2022-10-18

常見的選擇

目錄

 

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>[email protected]</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": "[email protected]",
                "received": "2014-05-30T22:15:00"
            },
            {
                "id": 14,
                "sender": "[email protected]",
                "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": "[email protected]",
          "received": "2014-05-30T22:15:00"
        },
        {
          "id": 14,
          "sender": "[email protected]",
          "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"));
                    });
        });

Notes

.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

 

這裡的 button 是用 formatter 劃出來的

formatter = Function

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

 

fancyTable

 

fancyTable 是 jQuery 的 plugin 來

功能: searchable and sortable with pagination feature.

原 Table 的 HTML

 * HTML table must have a thead & tbody element

<table id="smtpgw_report" class="table table-striped sampleTable">
  <thead>
    <tr>
      <th>Col A</th>
      <th>Col B</th>
      <th>Col C</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

這裡的 class 是用 bootstrap 的 class 美化 output

在 Header 引入 js  及 css

<!-- jQuery -->
<script src="/js/jquery-3.6.1.min.js"></script>
<!-- Bootstrap CSS -->
<script src="/js/bootstrap.min.js"></script>
<!-- Bootstrap JS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- fancyTable Js -->
<script src="/js/fancyTable.min.js"></script>

啟用 fancyTable

<script type="text/javascript">
    $(document).ready(function() {
        $("#smtpgw_report").fancyTable({
            sortColumn: 0,
            sortOrder: 'descending',
            sortable: true,
            pagination: true,
            perPage: 10,
            globalSearch: false
        });        
    });
</script>

Other Options & Function

Options

exactMatch # Default: false

If set to true, search will not match substrings such as "cat" in "catastrophic".

If set to "auto", search will be exact if the search term is enclosed in quotation marks.

matchCase # Default: false

Use case sensitive search

Data attributes

  • <th data-sortas="numeric">
  • <th data-sortas="case-insensitive">

Function

onUpdate - Function called after each update (sort and search)

onUpdate:function(){
    console.log({ element:this });
}

 

»
  • 瀏覽次數： 6321

Creative Commons license icon Creative Commons license icon