首先，介绍这两个插件的功能

1.DataTables是一个jQuery表单插件。

官方网站及其下载地址：http:/www.datatables.net

其主要特点如下：

1.自动分页处理

2.即时表格数据过滤

3.数据排序和自动数据类型检测

4.自动处理列宽

5.您可以通过CSS自定义样式

6.支持隐藏列

7.使用方便

8.可扩展性和灵活性

9.国际化

10.动态创建表格

11.免费

2.对话框是jQuery UI非常重要的功能。它完全取代了JavaScript的alert()、prompt()等方法，避免了新窗口或页面的复杂性和冗余性。

我直接说一下我需要实现哪些功能，大家就知道了

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

首先，让我们看一下数据表的编写

$ ('# table ')。数据表({ ' sdom ' : ' t ' ' SOC-pageagation ' IP ')，正在处理语言： { '的处理' : '.“slengngmenu”:“displays _ MENU _ sZeroRecords”:中没有匹配的结果”、“sInfo”:“显示从_START_ to _END_开始的结果，合计_TOTAL_”、“sInfoEmpty”:“显示从0到0的结果，合计0”，表中的数据“sInfoFiltered”:“sInfo postfix”:“s search”:“surl”:' sinfo experiences' : '，'，'不透明' : { '的第一个' : '主页'，' sPrevious': '上一页'，' sNext':SLast': '最后一页' }，' o aria ' : { ' ssortascending ' : ' :按升序排序此列'，' sSortDescending': ':按降序排序此列' }，' autoWidth': false，' processing': true，' serverSide ' : true，' searching ' : false，ordering: false，' info ' :val()；Var params={//参数集} $。Ajax ({Type:' get '，URL 3360 ' '，DataType:' JSON '，Data3360参数，Content type : ' Application/x-www-form-URL encoded；charset=utf-8 '，success:函数(d) {if(d！==null){回调({//返回查询结果records total :d . page util . total，records filterrd :d . page util . total，data :d . page util . list })；}}});}、“columns”:[{“data”:“code”}、{“data”:“name”}、//对应于表的字段]、“column defs”:[{“render”: function(data，type，Row) {//以下是替代显示，例如，如果查询结果为1，则可以显示其他值if (row。o _ status=' 0') {return [row。o _ status=' disabled' ]。join(' ')；} else if (row。o _ status==' 1') {return [row。o _ status=' enabled' ]。join(' ')；} else {return [row.o_status='']。join(' ')；}}，' targets': 6}，{//这一步是添加和删除link' render' :函数(数据，类型，行){ return[' a href=' id=' dialog _ link ' delete/a ']。join(' ')；}，' targets ' : 8 }]})；然后写出dailog的配置和风格

Html代码

div id=' dialog-message ' title=' prompt ' PS pan class=' ui-icon ui-icon-circle-check ' style=' float : left；余量：0 7px 50px 0 ’;/span是否删除此数据？/p/divjs代码

//jquery-ui对话框设置$ ('# dialog-message ')。dialog ({auto open : false，width : 400，resizable 3360 false，modal 3360 true，title : ' '，button s 3360[{ html : ' confirm '，' class' :' btnbtn _ b '，click : function(){ var code=window . parent . $(' # dialog-message ')。数据('代码')；//这里是获取传入参数值的位置. href='；$(这个)。对话框(“关闭”)；}}，{html :' cancel '，' class' :' btnbtn _ o '，点击： function () {$ (this)。对话框(“关闭”)；}}]});然后如何将参数传递到对话框中

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

/* * *弹出对话框并传递参数*/$(' # table body ')。on ('click '，' # dialog _ link '，function () {vartable=$ ('# table ')。datatable()；var data=table.row($(this)。父母(' tr ')。data()；//这是数据$ ('# dialog-message ')。数据('代码'，数据。代码)。您单击的行的对话框(“打开”)。//然后传入对话框并打开对话框返回false});我以前用过

$('#dialog_link ')。单击(function(){ })；不知道为什么对话框一直打不开

请注意，对话框设置必须放在上述代码之上

以上是边肖介绍的关于使用jQuery数据表和jQuery用户界面对话框的教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！