Json+DataTables+Bootsrap插件简单的实例-白红宇的个人博客

Json+DataTables+Bootsrap插件简单的实例

发布日期：2022-01-31 20:00:16 浏览次数：45 分类：技术文章

本文共 1355 字，大约阅读时间需要 4 分钟。

简要教程

这是一款非常实用的基于bootstrap的多功能模态对话框插件。该模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。它的主要特点有：

可以通过AJAX直接将调用内容到对话框中。

可以在指定的时间后自动关闭对话框。

可以设置为点击模态背景不关闭对话框。

拥有丰富的回调函数。

使用方法

该jQuery模态对话框插件有俩个外部依赖：

Bootstrap by Twitter > v2

jQuery library > v1.8

在页面中引入jQuery和jquery-confirm.js以及jquery-confirm.css文件，同时引入datatables依赖文件。

基本使用

$.confirm({			    title: 'Json 专题',//标题			    animationSpeed: 2000,//2000是以毫秒未设置值，可设置显示的快慢			    animation:"top",			    confirmButtonClass: 'btn-info',			    cancelButtonClass: 'btn-danger',			    confirm: function(){			        alert('the user clicked confirm');			    }			});

另外加上js中的json+ajax+datatables

$(document).ready( function () {	var list = [];	$.ajax({		type : 'post',		url : '/Demo/json',		dataType : 'json',		success : function(data) {			eval(data);			var html = "";			for (var i = 0; i < data.length; i++) {				var emp = data[i];				html += "";				html += "" + emp.id + "";				html += "" + emp.name + "";				html += "" + emp.age + "";				html += "";			}			$("#show").html(html);			//调用datatables插件			$('#table_id_example').DataTable({				"lengthMenu" : [ [ 2, 10, 20, -1 ], [ 2, 10, 20, "All" ] ],//每页显示条数设置			});		}	});   });

html代码：


    	
     点我!!	
     	
     
		      			       				        编号 				        姓名 				        年龄 			       
		      
		      			       				        1 				        张三 				        18

编号	姓名	年龄
1	张三	18

转载地址：https://blog.csdn.net/qq_23315711/article/details/54600997 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：前端正则校验

下一篇：实例变量的初始化时机

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

简要教程

使用方法

基本使用

发表评论

最新留言

关于作者

推荐文章