jquery dataTables 跟jquery ui 對話框dialog的使用

時間 2020-08-06

標籤 jquery datatables 對話框 dialog 使用欄目 JQuery 简体版

原文原文鏈接

首先介紹下這兩個插件功能　html

1.DataTables是一個jQuery的表格插件。jquery

官方網站及其下載地址：http:/www.datatables.netajax

其主要特色以下：json

1.自動分頁處理
2.即時表格數據過濾
3.數據排序以及數據類型自動檢測
4.自動處理列寬度
5.可經過CSS定製樣式
6.支持隱藏列
7.易用
8.可擴展性和靈活性
9.國際化
10.動態建立表格
11.免費的app

2.對話框（dialog），是jQuery UI 很是重要的一個功能。它完全的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或頁面的繁雜冗餘。ide

我這裏直接講下我須要實現什麼樣的功能，你們就知道了網站

對，就是一個很是簡單的刪除功能，而後彈出對話框，而後點擊肯定，執行刪除。ui

首先來看下dataTables裏面的寫法this

 1  $('#table').dataTable({
 2             "sDom": "t" +
 3             "<'soc-pagenagtion' ip>",
 4             oLanguage: {
 5                 "sProcessing": "處理中...",
 6                 "sLengthMenu": "顯示 _MENU_ 項結果",
 7                 "sZeroRecords": "沒有匹配結果",
 8                 "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
 9                 "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
10                 "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
11                 "sInfoPostFix": "",
12                 "sSearch": "搜索:",
13                 "sUrl": "",
14                 "sEmptyTable": "表中數據爲空",
15                 "sLoadingRecords": "載入中...",
16                 "sInfoThousands": ",",
17                 "oPaginate": {
18                     "sFirst": "首頁",
19                     "sPrevious": "上頁",
20                     "sNext": "下頁",
21                     "sLast": "末頁"
22                 },
23                 "oAria": {
24                     "sSortAscending": ": 以升序排列此列",
25                     "sSortDescending": ": 以降序排列此列"
26                 }
27             },
28             "autoWidth": false,
29             "processing": true,
30             "serverSide": true,
31             "searching": false,
32             ordering: false,
33             "info": true,
34             ajax: function (param, callback, settings) {
35                 var service = $("#service").val();
36                 var params = {
37                    //參數集合
38                 }
39                 $.ajax({
40                         type: "GET",
41                     url: "",
42                     dataType: "json",
43                     data: params,
44                     contentType: "application/x-www-form-urlencoded; charset=utf-8",
45                     success: function (d) {
46                         if(d!==null){
47                             callback({
48                              //返回的查詢結果
49     
50                                 recordsTotal: d.pageUtil.total,
51                                 recordsFiltered: d.pageUtil.total,
52                                 data: d.pageUtil.list
53                             });
54                         }
55 
56                     }
57                 });
58             },
59             "columns": [
60                 {"data": "code"},
61                 {"data": "name"},
62              //表格所對應的字段
63             ],
64             "columnDefs": [
65                 {
66                     "render": function (data, type, row) {
67                     //這裏是替換顯示  好比查詢結果爲1 你能夠顯示其餘的值
68                         if (row.o_status == '0') {
69                             return [
70                                 row.o_status = '停用'
71                             ].join('');
72                         } else if (row.o_status == '1') {
73                             return [
74                                 row.o_status = '啓用'
75                             ].join('');
76                         } else {
77                             return [
78                                 row.o_status = ''
79                             ].join('');
80                         }
81                     },
82                     "targets": 6
83                 },
84 
85                 {
86                  //這一步是追加刪除連接
87                     "render": function (data, type, row) {
88                       
89                             return [
90                                 "<a href=''  id='dialog_link'>刪除</a>"
91                             ].join('');
92                 
93                     },
94                     "targets": 8
95                 }
96             ]
97         });

View Code

接着就是寫dailog的配置跟樣式url

html代碼

    <div id="dialog-message"  title="提示">
            <p>
                <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                是否刪除該條數據？
            </p>
        </div>

js代碼

//        jquery-ui 對話框設置
        $( "#dialog-message" ).dialog({
            autoOpen : false,
            width : 400,
            resizable : false,
            modal : true,
            title:"",
            buttons:   [{
                html : "確認",
                "class" : "btn btn_b",
                click : function() {
                   var code= window.parent.$("#dialog-message").data("code");//這裏是獲取傳入的參數值
                  location.href=";
                    $(this).dialog("close");
                }
            }, {
                html : "取消",
                "class" : "btn btn_o",
                click : function() {
                    $(this).dialog("close");
                }
            }]
        });

接着怎麼就是傳參數進入對話框

首先定義點擊事件彈出對話框

/**
 * 彈出對話框並傳遞參數
 */
$('#table tbody').on( 'click', '#dialog_link', function () {
    var table = $('#table').DataTable();
    var data = table.row( $(this).parents('tr') ).data();//這裏是獲取當前你點擊的那行的數據
    $('#dialog-message').data("code", data.code).dialog('open');//而後傳入對話框，打開對話框
    return false;
});