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

前端之家收集整理的这篇文章主要介绍了jQuery dataTables与jQuery UI 对话框dialog的使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

首先来看下dataTables里面的写法

",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,row) { return [ "删除" ].join(''); },"targets": 8 } ] });

接着就是写dailog的配置跟样式

HTML代码

提示">

是否删除该条数据?

js代码

获取传入的参数值 location.href="; $(this).dialog("close"); } },{ html : "取消","class" : "btn btn_o",click : function() { $(this).dialog("close"); } }] });

接着怎么就是传参数进入对话框

首先定义点击事件弹出对话框

获取当前你点击的那行的数据 $('#dialog-message').data("code",data.code).dialog('open');//然后传入对话框,打开对话框 return false; });

我之前一直用

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

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

以上所述是小编给大家介绍的jQuery dataTables与jQuery UI 对话框dialog的使用教程。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章