碼上快樂

相關內容    簡體    繁體

datatables01 安裝、數據源、選中行事件、新增一行數據、刪除一行數據

本文轉載自   查看原文   2018-04-20 22:56   1211    Zeus_jquery

 

1 安裝

　　1.1 引入必要文件

　　　　要在項目中使用datatables需要引入三個文件

　　　　　　》DataTables CSS

　　　　　　》jQuery

　　　　　　》DataTables JS

<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

　　1.2 編寫 table 標簽

　　　　為 table 標簽模擬一些數據即可

    <table id="table_id_example" 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>

　　1.3 初始化Datatables

    <script type="text/javascript">
        $(document).ready( function () {
            $('#table_id_example').DataTable();
        } );
    </script>

　　1.4 源代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>安裝</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            $('#table_id_example').DataTable();
        } );
    </script>
</head>
<body>
    <table id="table_id_example" 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>
</body>
</html>
</html>
View Code

 

2 數據

　　DataTables 中有很多的選項可用於配置如何獲得表中的數據顯示,以及如何處理這些復雜的數據。

　　2.1 處理模式

　　　　datatables 中的數據可以進行分頁、搜索、排序等功能，這些功能都是針對數據進行的處理，而datatables的數據處理主要由兩種模式，兩種模式不能同時使用，但是可以動態改變

　　　　2.1.1 客戶端處理

　　　　　　一次性加載所有的數據，所有的數據處理操作都是在瀏覽器中完成的

　　　　2.1.2 服務器端處理

　　　　　　數據都是在服務器端進行處理，瀏覽器僅僅起顯示作用

　　2.2 數據源類型

　　　　這里的數據源類型是指數據源對應的那個數組所包含元素的類型

　　　　數據源就是一個數組，該數組的元素類型可以用三種形式：數組、對象、實例

　　　　2.2.1 數組

　　　　　　使用數組類型時 datatables 會自動根據數據進行顯示，每一個數組代表一行；每個數組的第n個元素會顯示在table標簽的第n列；

　　　　　　技巧01：列和數組元素的下標都是從0開始的

　　　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>安裝</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            var data = [
                [
                    "Tiger Nixon",
                    "System Architect",
                    "Edinburgh",
                    "5421",
                    "2011/04/25",
                    "$3,120"
                ],
                [
                    "Garrett Winters",
                    "Director",
                    "Edinburgh",
                    "8422",
                    "2011/07/25",
                    "$5,300"
                ]
            ];
            $('#table_id_example').DataTable({
                data: data
            });
        } );
    </script>
</head>
<body>
    <table id="table_id_example" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
        </thead>
        
    </table>
</body>
</html>
</html>
View Code

　　　　2.2.2 對象

　　　　　　利用對象類型是數據的對應關系不是利用下標，而是利用屬性名稱記性對應；每個對象表示一行數據，如果對象屬性的數量少於table標簽中th標簽的數量時顯示的效果會是空白；利用對象作為數據源中元素的對象使用於從后台獲取數據（PS:利用AJAX從后台獲取數據）

　　　　　

　　　　2.2.3 實例

　　　　　　利用實例的方式和利用對象的方式幾乎一樣；利用實例的方式使用於ES6

　　　　　　待更新...

　　　　　　2018-4-20 21:48:43

 　　2.3 數據源

　　　　datatables的數據源主要有：DOM、JavaScript、Ajax

　　　　2.3.1 DOM

　　　　　　DataTables 初始化后，它會自動檢查表格中的數據，即：初始化時會自動檢查table標簽里面擁有的數據

　　　　　　坑01：如果你這時使用data或者ajax傳遞數據將不會顯示，而且還會報錯；錯誤信息如下：

　　　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>數據源-DOM</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            var data = [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "salary":     "$3,120",
                    "start_date": "2011/04/25",
                    "office":     "Edinburgh",
                    "extn":       "5421"
                },
                {
                    "name":       "Garrett Winters",
                    "position":   "Director",
                    "salary":     "$5,300",
                    "start_date": "2011/07/25",
                    "office":     "Edinburgh",
                    "extn":       "8422"
                }
            ];
            $('#table_id_example').DataTable({
                data: data,
                columns: [
                    { data: 'name' },
                    { data: 'position' },
                    { data: 'salary' },
                    { data: 'office' }
                ]
            });
        } );
    </script>
</head>
<body>
    <table id="table_id_example" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>數據 1</td>
                <td>數據 2</td>
                <td>數據 3</td>
                <td>數據 4</td>
                <td>數據 5</td>
                <td>數據 6</td>
            </tr>
        </tbody>
        
    </table>
</body>
</html>
</html>
View Code

　　　　　　　　

　　　　　　技巧01：datatables 還可以直接將 DOM 數據轉化為自己的內部數據對象

 　　　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>數據源-DOM</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            
            var table = $('#table_id_example').DataTable({
             //這樣配置后，即可用DT的API來訪問表格數據
                columns: [
                    {data: "a"}, // 技巧：這里的字段名可以任意指定，因為datatables中的數據是來源於DOM數據
                    {data: "b"}
                ]
            });

            //給行綁定選中事件
            $('#table_id_example tbody').on( 'click', 'tr', function () { // 單擊table中的tr標簽觸發該方法
                if ($(this).hasClass('selected')) { // 給被單擊的tr方法添加一個 class
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                console.log(table.row('.selected').data()); // 利用 DataTables 對象去獲取被單擊的tr中的數據並打印
            } );
        } );
    </script>
</head>
<body>
    <table id="table_id_example" 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>
</body>
</html>
</html>
View Code

　　　　　　技巧02：如果使用data傳遞數據，也可以對表格的進行選中事件綁定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>數據源中元素類型是對象</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            var data = [
                {
                    "name":       "Tiger Nixon",
                    "position":   "System Architect",
                    "salary":     "$3,120",
                    "start_date": "2011/04/25",
                    "office":     "Edinburgh",
                    "extn":       "5421"
                },
                {
                    "name":       "Garrett Winters",
                    "position":   "Director",
                    "salary":     "$5,300",
                    "start_date": "2011/07/25",
                    "office":     "Edinburgh",
                    "extn":       "8422"
                }
            ];
            var table = $('#table_id_example').DataTable({
                data: data,
                columns: [
                    { data: 'name' },
                    { data: 'position' },
                    { data: 'salary' },
                    { data: 'office' }
                ]
            });


            //給行綁定選中事件
            $('#table_id_example tbody').on( 'click', 'tr', function () { // 單擊table中的tr標簽觸發該方法
                if ($(this).hasClass('selected')) { // 給被單擊的tr方法添加一個 class
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                console.log(table.row('.selected').data()); // 利用 DataTables 對象去獲取被單擊的tr中的數據並打印
            } );

        } );
    </script>
</head>
<body>
    <table id="table_id_example" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        
        
    </table>
</body>
</html>
</html>
View Code

　　　　2.3.2 JavaScript

　　　　　　datatables可以利用形式的數據類型記性初始化，初始化過后可以利用 row.add() 添加一行數據，利用 rows().remove() 去刪除選中的數據

　　　　　　　　

　　　　　　　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>添加數據</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
            
            var table = $('#table_id_example').DataTable({
             //這樣配置后，即可用DT的API來訪問表格數據
                columns: [
                    {data: "a"}, // 技巧：這里的字段名可以任意指定，因為datatables中的數據是來源於DOM數據
                    {data: "b"}
                ]
            });

            //給行綁定選中事件
            $('#table_id_example tbody').on( 'click', 'tr', function () { // 單擊table中的tr標簽觸發該方法
                if ($(this).hasClass('selected')) { // 給被單擊的tr方法添加一個 class
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                console.log(table.row('.selected').data()); // 利用 DataTables 對象去獲取被單擊的tr中的數據並打印
            } );


            $("#addData").on('click', function() {
                alert('即將添加數據');
                table.row.add({
                    "a": "wys",
                    "b": "重慶"
                }).draw();
            });

            $("#delData").on('click', function() {
                alert("即將刪除選中的數據");
                table
                    .row('.selected')  // 獲取選中的行（選中的行會有一個名為selected的class，因為我們進行了行選中時間綁定）
                    .remove() // 移除選中的行
                    .draw(); // 刷新

            });

        } );
    </script>
</head>
<body>
    <button id="addData">點擊添加一行數據</button>
    <hr />
    <button id="delData">刪除選中的數據</button>
    <table id="table_id_example" 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>
</body>
</html>
</html>
View Code

 

　　

 

　　　　　　

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 DataGridView添加一行數據、全選、取消全選、清空數據、刪除選中行 jqGrid的選中行事件 DataGrid 刪除一行數據 jquery動態添加刪除一行數據示例 Vue刪除表格中的某一行數據 layui 表格新增刪除一行 Android ListView中獲取選中行數據的方法 獲取Table選中行數據（Table篇二） jquery中獲取當前選中行數據的方法 刪除dataGridview中選中的一行或多行
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM