jQuery dataTables与jQuery UI 对话框dialog的使用教程

203 阅读 0 评论 134 点赞

我是靠谱客的博主淡定书本，最近开发中收集的这篇文章主要介绍jQuery dataTables与jQuery UI 对话框dialog的使用教程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先介绍下这两个插件功能　

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

我之前一直用