jquery DataTable 插件的使用：本地数据，ajax，带参跳转，点击获取表中某行数据

最新推荐文章于 2022-01-03 16:49:47 发布

香菇青菜包

最新推荐文章于 2022-01-03 16:49:47 发布

阅读量1k

点赞数

文章标签： bootstrap Datatable jquery

本文链接：https://blog.csdn.net/qq_41850449/article/details/89352237

版权

本地数据

//首先在html 中引入几个 bootstrap.min.css   jquery.dataTables.min.css   
bootstrap.min.js   jquery.dataTables.min.js 这些都是必须的，别的您可忽略

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Datatable-serverSide 服务器分页例子</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css"/>
	<script src="js/jquery.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/dataTables.bootstrap.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="plugin/handlebars-v3.0.1.js"></script>
	<script src="js/tabledevice.js"></script>
</head>
<body>
<div class="container">
	<table id="example" class="table table-striped table-bordered">
    	<thead>
    	<tr>
        	<th>Name</th>
        	<th>IP</th>
        	<th>Group</th>
        	<th>Edit/Delete</th>
    	</tr>
    	</thead>
    	<tbody></tbody>
    	<!-- tbody是必须的 -->
	</table>
</div>


<script type="text/javascript">
	var data = [
	{
    "name":       "rfswitch1",
    "ip":         "192.168.1.1",
    "group":       "A"
	},
	{
    "name":       "rfswitch6",
    "ip":         "192.168.1.5",
    "group":       "B"
	},
	{
    "name":       "rfswitch12",
    "ip":         "192.168.1.11",
    "group":       "D"
	}
	];
	var table;
	var editFlag = false;
	window.onload=function(){
		debugger;
		table = $('#example').DataTable({ //datatable init
    		data: data,
    		columns: [
        		{"data": "name"},
        		{"data": "ip"},
        		{"data": "group"}, 
        		{"data": null}
    		],
    		 columnDefs: [         //最后一列添加button
            {
                targets: 3,          //从0开始的第3列
                "render": function (data, type, row, meta) {
                    return data = '<button class="btn btn-info btn-sm" data-id=' + data + '><i class="fa fa-pencil"></i>Edit</button>'
                        + '<button class="btn btn-danger btn-sm" data-id=' + data + '><i class="fa fa-trash-o"></i>Delete</button>';
                }
            }
		});
	};
</script>
</body>
</html>

ajax 收到服务器数据，再做成表格

html:
 <table  id="example">
      <thead>
           <tr class="headings">
				
                        <th>id</th>
        				<th>address</th>
            </tr>
          </thead>


<script type="text/javascript">

	function online(){
  		var data2="";	
  		var str = "";  
  		
  		var o=$.ajax({
		url: "http://127.0.0.1:7000",
		async:false,         //将ajax回调值转为全局变量
		data: {function:3,id:"refresh",data:1},
		type: 'post',
		success: function(result){

				var contact = JSON.parse(result)
		 		data2=contact.data     //后台传来data={}里面是个list
		},
	  
		error:function()
			 {
				 alert("error on connection"); 
				 clearInterval(interval_online);
			 }
	});
	
	
		$('#example').DataTable({
			"bLengthChange": false,   //去掉每页显示多少条数据方法
			"paging": false,
			searching:false, //去掉搜索框 
			/*"ordering": false, // 禁止排序*/
			clickToSelect: true, //是否启用点击选中行  
			destroy:true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
   			data: data2,
   			columns: [
			{ data: 'id' }, //为每一列表格应该填充的内容指明json的标题,否则datatables找不到这一列要加载的内容
       		{ data: 'address'},
    		],
	 	})
	
  }
  
  	var interval_online = setInterval(online,2000);//2秒刷新一次在线设备

	//该监听是持续的
	$('#example tbody').on( 'click', 'tr', function () {
		
		var index = $(this).context._DT_RowIndex; //行号

		var nTds = $('td', this);
		
		var sday = $(nTds[0]).text();  //得到第1列的值 
		
		alert(sday);
	
		/*var updateId = "hello";
		window.location.href = "specified_equi.html?index="+updateId;//参数名称为index*/      //带参数跳转

		/*window.open('specified_equi.html','_self');*/    //无参数跳转
		
		} );

</script>

附： 接收参数的页面写法：

<script type="text/javascript">

	var ind = getUrlQueryString('index');
		alert(ind);


	function getUrlQueryString(names, urls) {
		urls = urls || window.location.href;
		urls && urls.indexOf("?") > -1 ? urls = urls
		.substring(urls.indexOf("?") + 1) : "";
		var reg = new RegExp("(^|&)" + names + "=([^&]*)(&|$)", "i");
		var r = urls ? urls.match(reg) : window.location.search.substr(1)
		.match(reg);
		if (r != null && r[2] != "")
			return unescape(r[2]);
		return null;
	};
</script>

香菇青菜包

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery DataTable 插件的使用：本地数据，ajax，带参跳转，点击获取表中某行数据

本地数据//首先在html 中引入几个 bootstrap.min.css jquery.dataTables.min.css bootstrap.min.js jquery.dataTables.min.js 这些都是必须的，别的您可忽略<!DOCTYPE html><html><head> <meta charset="utf-...
复制链接

扫一扫