讨论jquery Datatable获取行号两种写法

最新推荐文章于 2023-05-30 19:39:52 发布

原创最新推荐文章于 2023-05-30 19:39:52 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #Datatable

本文详细介绍了如何使用Datatables插件进行高级配置，包括禁用分页、搜索和排序功能，自定义列数据，以及通过点击事件获取表格行信息。同时，展示了如何在表格中添加按钮并响应点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <table  id="example">

$('#example').DataTable({
			"language": language,  //language
			//"lengthMenu":[ 10, 20, 30],
			"bLengthChange": false,   //去掉每页显示多少条数据方法
			"paging": false,
			searching:false, //去掉搜索框 
			/*"ordering": false, // 禁止排序*/
			clickToSelect: true, //是否启用点击选中行  
			destroy:true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
   			data: data2,
   			columns: [

			{ data: 'id' }, //为每一列表格应该填充的内容指明json的标题,否则datatables找不到这一列要加载的内容
       		{ data: 'address'},
    		],
	 	})

//example 为table的id
$('#example tbody').on( 'click', 'tr', function () {
		
		var index = $(this).context._DT_RowIndex; //行号

		var nTds = $('td', this);
		
		var sday = $(nTds[0]).text();  //得到第1列的值 
		
		//alert(sday);
	
		
} );

——————————————————割——————————————————

 <table  id="example">
 
 $('#example').DataTable({
		"language": language,  //language
		//"lengthMenu":[ 10, 20, 30],
		"bLengthChange": false,   //去掉每页显示多少条数据方法
		"paging": false,
		searching:false, //去掉搜索框 
		"ordering": false, // 禁止排序
		clickToSelect: true, //是否启用点击选中行  
		destroy:true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
   		data: data2,
   		columns: [

			{ data: 'id',className:"mystyle"}, //为每一列表格应该填充的内容指明json的标题,否则datatables找不到这一列要加载的内容
       		{ data: 'ip',className:"mystyle"},
			{ data: 'state',className:"mystyle"},	
			{ data: null,"render": function(data,type,row,meta){
                return data = '<button class="btn btn-primary btn-xs" id="monitor">&nbsp;&nbsp;监察&nbsp;&nbsp;</button>';
            }
			}
				
    	]
			
  })

	//example 为table的id，monitor为按键的id
	
	$('#example tbody').on( 'click', '#monitor', function () {

		//获取行
		var row = $("table#example tr").index($(this).closest("tr"));
		//获取某列（从0列开始计数）的值
        var id = $("table#example").find("tr").eq(row).find("td").eq(0).text();
		alert(row);

		} );