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


Posted in Javascript onSeptember 02, 2016

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

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()等方法,也避免了新窗口或页面的繁杂冗余。

我这里直接讲下我需要实现什么样的功能,大家就知道了

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

对,就是一个非常简单的删除功能,然后弹出对话框,然后点击确定,执行删除。

首先来看下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;
});

我之前一直用

$("#dialog_link").click(function(){
});

不知道为什么一直打不开对话框

注意对话框设置一定要放到上面这个代码的上面

以上所述是小编给大家介绍的jQuery dataTables与jQuery UI 对话框dialog的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 #Javascript
AngularJs Managing Service Dependencies详解
Sep 02 #Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 #Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 #Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 #Javascript
AngularJs  Using $location详解及示例代码
Sep 02 #Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
python求最大连续子数组的和
2018/07/07 Python
Python实现端口检测的方法
2018/07/24 Python
python实现录音小程序
2020/10/26 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
NumPy中的维度Axis详解
2019/11/26 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
美容师的职业规划书
2013/12/27 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Golang 字符串的常见操作
2022/04/19 Golang
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技