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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
Validform表单验证总结篇
Oct 31 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
在线服装零售商:SheIn
2016/07/22 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
Exception类的常用方法
2012/06/16 面试题
银行工作检查书范文
2014/01/31 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
重阳节标语大全
2014/10/07 职场文书
科技活动周标语
2014/10/08 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2016年母亲节广告语
2016/01/28 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python