Question

我有一个表，想要在行中的按钮的click事件上运行js（由datatables填充）我使用了datatables网站上的代码，但似乎无效。

＆＃13;

$(document).ready(function(){
     $('#expvisa').on('click','button',function() {
         var msData = table.row($(this).parents('tr')).data();
         alert( msData[0] +" salary is: "+ msData[4]);
     });
 });

＆＃13;

<table id="expvisa" class="table table-bordered" cellspacing="0" >
  <thead>
    <tr>
      <th>EMP Id</th>
      <th>VISA OFFICE</th>
      <th>EMPLOYEE NAME</th>
      <th>QATAR ID</th>
      <th>ID MONTH</th>
      <th>Process </th>                
    </tr>
  </thead>            
</table>

＆＃13;

这是创建表格的脚本。

＆＃13;

        function bringvisa_exp(){	
		
			$.ajax({				
				url:"report_visaexp.php",
				type:"POST",
				data:{comp_n:$('#comp_n').val(),visam_f:$('#visam_f').val()},
				async: false,
				success: function(dataX){	
					obj = JSON.parse(dataX);
					$('#expvisa').DataTable({
					data: obj,
					"columnDefs": 	[ {
					"targets": -1,
					"data": null,
					"defaultContent": "<button>Apply</button>"
									} ]
					} );				
				}								
			}); 
		}

＆＃13;

Answer 1

您需要在ajax call success function块内调用此脚本。因为click event在DOM准备好之前就已绑定了。

 $('#expvisa tbody').on('click','button',function() {
     var msData = table.row($(this).parents('tr')).data();
     alert( msData[0] +" salary is: "+ msData[4]);
 });

使用以下内容更新bringvisa_exp()功能：

function bringvisa_exp(){       
        $.ajax({                
            url:"report_visaexp.php",
            type:"POST",
            data:{comp_n:$('#comp_n').val(),visam_f:$('#visam_f').val()},
            async: false,
            success: function(dataX){   
                obj = JSON.parse(dataX);
                $('#expvisa').DataTable({
                  data: obj,
                  "columnDefs": [ {
                    "targets": -1,
                    "data": null,
                    "defaultContent": "<button>Apply</button>"
                   } ]
                } );
                $('#expvisa').on('click','button',function() {
                  var msData = table.row($(this).parents('tr')).data();
                  alert( msData[0] +" salary is: "+ msData[4]);
                });
            }                               
        }); 
    }

Answer 2

试试这个。我将$('#expvisa' tbody)更改为$('#expvisa tbody')

＆＃13;

$(document).ready(function(){
    $('#expvisa tbody').on('click','button',function() {
	 var msData = table.row($(this).parents('tr')).data();
	 alert( msData[0] +" salary is: "+ msData[4]);
    });
});

＆＃13;

Answer 3

在Jithendra的帮助下，我可以解决这个问题并进行一次小编辑以获得表变量。我以为＆＃39; table＆＃39;是js / jq可识别组件。但事实并非如此。所以添加了var table = $('#expvisa').DataTable();

＆＃13;

function bringvisa_exp(){       
        $.ajax({                
            url:"report_visaexp.php",
            type:"POST",
            data:{comp_n:$('#comp_n').val(),visam_f:$('#visam_f').val()},
            async: false,
            success: function(dataX){   
                obj = JSON.parse(dataX);
                $('#expvisa').DataTable({
                  data: obj,
                  "columnDefs": [ {
                    "targets": -1,
                    "data": null,
                    "defaultContent": "<button>Apply</button>"
                   } ]
                } );
                $('#expvisa').on('click','button',function() {
                  var table = $('#expvisa').DataTable();
                  var msData = table.row($(this).parents('tr')).data();
                  alert( msData[0] +" salary is: "+ msData[4]);
                });
            }                               
        }); 
    }

＆＃13;

如何选择表元素并运行javascript

3 个答案: