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 相关文章推荐
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
js实现简单商品筛选功能
Feb 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
浅析Python面向对象编程
2020/07/10 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年手术室工作总结
2015/05/11 职场文书
预备党员半年考察意见
2015/06/01 职场文书