jQuery dataTables與jQuery UI 對話框dialog的使用教程

2019-11-20 09:05:46

字體：大中小

來源：轉載

供稿：網友

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

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

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

其主要特點如下：

1.自動分頁處理

2.即時表格數據過濾

3.數據排序以及數據類型自動檢測

4.自動處理列寬度

5.可通過CSS定制樣式

6.支持隱藏列

7.易用

8.可擴展性和靈活性

9.國際化

10.動態創建表格

11.免費的

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

我這里直接講下我需要實現什么樣的功能，大家就知道了

對，就是一個非常簡單的刪除功能，然后彈出對話框，然后點擊確定，執行刪除。

首先來看下dataTables里面的寫法

$('#table').dataTable({"sDom": "t" +"<'soc-pagenagtion' ip>",oLanguage: {"sProcessing": "處理中...","sLengthMenu": "顯示 _MENU_ 項結果","sZeroRecords": "沒有匹配結果","sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項","sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項","sInfoFiltered": "(由 _MAX_ 項結果過濾)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中數據為空","sLoadingRecords": "載入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首頁","sPrevious": "上頁","sNext": "下頁","sLast": "末頁"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}},"autoWidth": false,"processing": true,"serverSide": true,"searching": false,ordering: false,"info": true,ajax: function (param, callback, settings) {var service = $("#service").val();var params = {//參數集合}$.ajax({type: "GET",url: "",dataType: "json",data: params,contentType: "application/x-www-form-urlencoded; charset=utf-8",success: function (d) {if(d!==null){callback({//返回的查詢結果recordsTotal: d.pageUtil.total,recordsFiltered: d.pageUtil.total,data: d.pageUtil.list});}}});},"columns": [{"data": "code"},{"data": "name"},//表格所對應的字段],"columnDefs": [{"render": function (data, type, row) {//這里是替換顯示 比如查詢結果為1 你可以顯示其他的值if (row.o_status == '0') {return [row.o_status = '停用'].join('');} else if (row.o_status == '1') {return [row.o_status = '啟用'].join('');} else {return [row.o_status = ''].join('');}},"targets": 6},{//這一步是追加刪除鏈接"render": function (data, type, row) {return ["<a href='' id='dialog_link'>刪除</a>"].join('');},"targets": 8}]});

接著就是寫dailog的配置跟樣式

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;});

我之前一直用