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

更新時(shí)間：2016年09月02日 17:02:36 作者：也許明天1

這篇文章主要介紹了jQuery dataTables與jQuery UI 對話框dialog的使用教程的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

首先介紹下這兩個(gè)插件功能　

1.DataTables是一個(gè)jQuery的表格插件。

官方網(wǎng)站及其下載地址：http:/www.datatables.net

其主要特點(diǎn)如下：

1.自動分頁處理

2.即時(shí)表格數(shù)據(jù)過濾

3.數(shù)據(jù)排序以及數(shù)據(jù)類型自動檢測

4.自動處理列寬度

5.可通過CSS定制樣式

6.支持隱藏列

7.易用

8.可擴(kuò)展性和靈活性

9.國際化

10.動態(tài)創(chuàng)建表格

11.免費(fèi)的

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

我這里直接講下我需要實(shí)現(xiàn)什么樣的功能，大家就知道了

對，就是一個(gè)非常簡單的刪除功能，然后彈出對話框，然后點(diǎn)擊確定，執(zhí)行刪除。

首先來看下dataTables里面的寫法

$('#table').dataTable({
"sDom": "t" +
"<'soc-pagenagtion' ip>",
oLanguage: {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果",
"sZeroRecords": "沒有匹配結(jié)果",
"sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
"sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
"sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數(shù)據(jù)為空",
"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 = {
//參數(shù)集合
}
$.ajax({
type: "GET",
url: "",
dataType: "json",
data: params,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function (d) {
if(d!==null){
callback({
//返回的查詢結(jié)果
recordsTotal: d.pageUtil.total,
recordsFiltered: d.pageUtil.total,
data: d.pageUtil.list
});
}
}
});
},
"columns": [
{"data": "code"},
{"data": "name"},
//表格所對應(yīng)的字段
],
"columnDefs": [
{
"render": function (data, type, row) {
//這里是替換顯示 比如查詢結(jié)果為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>
是否刪除該條數(shù)據(jù)？
</p>
</div>

js代碼

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

接著怎么就是傳參數(shù)進(jìn)入對話框

首先定義點(diǎn)擊事件彈出對話框

/**
* 彈出對話框并傳遞參數(shù)
*/
$('#table tbody').on( 'click', '#dialog_link', function () {
var table = $('#table').DataTable();
var data = table.row( $(this).parents('tr') ).data();//這里是獲取當(dāng)前你點(diǎn)擊的那行的數(shù)據(jù)
$('#dialog-message').data("code", data.code).dialog('open');//然后傳入對話框，打開對話框
return false;
});

我之前一直用