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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
传智播客学习之java 反射
Nov 22 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue实现登录功能
Dec 31 Vue.js
浅谈克隆 JavaScript
Nov 02 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
mysql建立外键
2006/11/25 PHP
PHP 变量的定义方法
2010/01/26 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP连接access数据库
2015/03/27 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python中执行shell的两种方法总结
2017/01/10 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
《故乡》教学反思
2014/04/10 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL