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 相关文章推荐
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
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
Session的工作方式
2006/10/09 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
详解Python正则表达式re模块
2019/03/19 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
毕业生的自我评价
2013/12/30 职场文书
教师考核材料
2014/05/21 职场文书
国际贸易系求职信
2014/08/09 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
2015年团支部工作总结
2015/04/03 职场文书
结婚主持人致辞
2015/07/28 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang