JqueryTable的使用

2021-7-7 前端達人

1.目的

用漂亮的前端表格直觀顯示數據

2. JqueryTable簡介

JqueryTable官網

表格顯示

3.用法

1.初始化html頁面

設置一個table




    

        

            

            

        

        

            
                <table id="table_id" class="display">
            

        

    

    

        

            

            

        

        

            
                <thead>
            

        

    

    

        

            

            

        

        

            
                <tr>
            

        

    

    

        

            

            

        

        

            
                <th>Column 1</th>
            

        

    

    

        

            

            

        

        

            
                <th>Column 2</th>
            

        

    

    

        

            

            

        

        

            
                </tr>
            

        

    

    

        

            

            

        

        

            
                </thead>
            

        

    

    

        

            

            

        

        

            
                <tbody>
            

        

    

    

        

            

            

        

        

            
                <tr>
            

        

    

    

        

            

            

        

        

            
                <td>Row 1 Data 1</td>
            

        

    

    

        

            

            

        

        

            
                <td>Row 1 Data 2</td>
            

        

    

    

        

            

            

        

        

            
                </tr>
            

        

    

    

        

            

            

        

        

            
                <tr>
            

        

    

    

        

            

            

        

        

            
                <td>Row 2 Data 1</td>
            

        

    

    

        

            

            

        

        

            
                <td>Row 2 Data 2</td>
            

        

    

    

        

            

            

        

        

            
                </tr>
            

        

    

    

        

            

            

        

        

            
                </tbody>
            

        

    

    

        

            

            

        

        

            
                </table>

2.引入靜態資源

這個是JqueryTable必要的靜態資源




    

        

            

            

        

        

            
                <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

如果你使用了js，那么還需要引入jquery.js

3.初始化表格




    

        

            

            

        

        

            
                $(document).ready( function () {
            

        

    

    

        

            

            

        

        

            
                $('#table_id').DataTable();
            

        

    

    

        

            

            

        

        

            
                } );

3.實例

1. html頁面




    

        

            

            

        

        

            
                <table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
            

        

    

    

        

            

            

        

        

            
                <thead>
            

        

    

    

        

            

            

        

        

            
                <tr>
            

        

    

    

        

            

            

        

        

            
                <th width="10%">用戶名</th>
            

        

    

    

        

            

            

        

        

            
                <th width="10%">姓名</th>
            

        

    

    

        

            

            

        

        

            
                <th width="8%">性別</th>
            

        

    

    

        

            

            

        

        

            
                <th width="10%">手機號</th>
            

        

    

    

        

            

            

        

        

            
                <th width="5%">工作年限</th>
            

        

    

    

        

            

            

        

        

            
                <th width="12%">教員類型</th>
            

        

    

    

        

            

            

        

        

            
                <th width="15%">角色</th>
            

        

    

    

        

            

            

        

        

            
                <th width="10%">備注</th>
            

        

    

    

        

            

            

        

        

            
                <th width="12%">操作</th>
            

        

    

    

        

            

            

        

        

            
                </tr>
            

        

    

    

        

            

            

        

        

            
                </thead>
            

        

    

    

        

            

            

        

        

            
                </table>

2.js代碼

ajax 發送請求，接受表格數據，再填寫進去




    

        

            

            

        

        

            
                initGrantedCoachGrid:function(){
            

        

    

    

        

            

            

        

        

            
                selectedUserId =[];
            

        

    

    

        

            

            

        

        

            
                if(grantedCoachGrid){
            

        

    

    

        

            

            

        

        

            
                grantedCoachGrid.ajax.url(
            

        

    

    

        

            

            

        

        

            
                "course/getGrantedCoachByFolder?json&folderId="
            

        

    

    

        

            

            

        

        

            
                + selectNodeId + "").load();
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                grantedCoachGrid = $('#tbl_grantedCoach')
            

        

    

    

        

            

            

        

        

            
                .DataTable(
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "lengthMenu" : [ [ 10, 20, 30 ],
            

        

    

    

        

            

            

        

        

            
                [ 10, 20, 30 ] // change per page
            

        

    

    

        

            

            

        

        

            
                // values here
            

        

    

    

        

            

            

        

        

            
                ],
            

        

    

    

        

            

            

        

        

            
                "ordering":false,
            

        

    

    

        

            

            

        

        

            
                "retrieve":true ,
            

        

    

    

        

            

            

        

        

            
                "bDestory" :true,
            

        

    

    

        

            

            

        

        

            
                "pageLength": 10,
            

        

    

    

        

            

            

        

        

            
                "bAutoWidth" : false,
            

        

    

    

        

            

            

        

        

            
                "ajax" : {
            

        

    

    

        

            

            

        

        

            
                "url" : "course/getGrantedCoachByFolder?json&folderId="
            

        

    

    

        

            

            

        

        

            
                + selectNodeId + "",
            

        

    

    

        

            

            

        

        

            
                "type" : "get",
            

        

    

    

        

            

            

        

        

            
                "cache" : false,
            

        

    

    

        

            

            

        

        

            
                "contentType" : "application/json; charset=utf-8",
            

        

    

    

        

            

            

        

        

            
                "dataSrc" : ""
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                "rowCallback" : function(row, data) {
            

        

    

    

        

            

            

        

        

            
                selectedUserId.push(data.userId);
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                "aoColumnDefs" : [ {
            

        

    

    

        

            

            

        

        

            
                sDefaultContent : '',
            

        

    

    

        

            

            

        

        

            
                aTargets : [ '_all' ]
            

        

    

    

        

            

            

        

        

            
                } ],
            

        

    

    

        

            

            

        

        

            
                // 填入列數據
            

        

    

    

        

            

            

        

        

            
                "columns" : [
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "loginName"
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "userFullName"
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "gender",
            

        

    

    

        

            

            

        

        

            
                "mRender" : function(data,
            

        

    

    

        

            

            

        

        

            
                type, full) {
            

        

    

    

        

            

            

        

        

            
                if (data == "M") {
            

        

    

    

        

            

            

        

        

            
                return "男";
            

        

    

    

        

            

            

        

        

            
                } else if (data == "F") {
            

        

    

    

        

            

            

        

        

            
                return "女";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "mobilePhone"
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "workYear"
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                { "data": "coachType" , "mRender":function(data,type,full){
            

        

    

    

        

            

            

        

        

            
                if(data=="0")
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                data="理論培訓";
            

        

    

    

        

            

            

        

        

            
                }else if(data=="1"){
            

        

    

    

        

            

            

        

        

            
                data="實習培訓";
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                data="理論培訓+實習培訓";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return data;
            

        

    

    

        

            

            

        

        

            
                }},
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" :function( row, type, val, meta ){
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                return row.userRoles[0].roleName;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : "remark"
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                "data" : null,
            

        

    

    

        

            

            

        

        

            
                "mRender" : function(data,
            

        

    

    

        

            

            

        

        

            
                type, full) {
            

        

    

    

        

            

            

        

        

            
                return "";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                ],
            

        

    

    

        

            

            

        

        

            
                "oLanguage" : {
            

        

    

    

        

            

            

        

        

            
                "sProcessing" : "正在加載中......",
            

        

    

    

        

            

            

        

        

            
                "sLengthMenu" : "每頁顯示_MENU_條記錄",
            

        

    

    

        

            

            

        

        

            
                "sZeroRecords" : "對不起，查詢不到相關數據！",
            

        

    

    

        

            

            

        

        

            
                "sEmptyTable" : "無數據存在！",
            

        

    

    

        

            

            

        

        

            
                "sInfo" : "當前顯示_START_到_END_條，共_TOTAL_條記錄",
            

        

    

    

        

            

            

        

        

            
                "sInfoFiltered" : "數據表中共為 _MAX_ 條記錄",
            

        

    

    

        

            

            

        

        

            
                "sSearch" : "",
            

        

    

    

        

            

            

        

        

            
                "oPaginate" : {
            

        

    

    

        

            

            

        

        

            
                "sFirst" : "首頁",
            

        

    

    

        

            

            

        

        

            
                "sPrevious" : "上一頁",
            

        

    

    

        

            

            

        

        

            
                "sNext" : "下一頁",
            

        

    

    

        

            

            

        

        

            
                "sLast" : "末頁"
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }, // 多語言配置
            

        

    

    

        

            

            

        

        

            
                "stateSave" : true
            

        

    

    

        

            

            

        

        

            
                // save the state of a table
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    




     
    
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
    

    
         
    

    
        


    

    
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    

    
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    

    
        藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務