Question

我已经构建了一个脚本，使我的DataTable中的行可点击。

当我单击一行时，浏览器将我导航到以下位置：./test.php?id =

现在的问题是我有一列带有复选框的列。当我勾选复选框时，脚本还会将我导航到该位置。

我想使第二列（目标1）不可点击。当我单击第二列时，脚本不应将我导航到以下位置：./test.php?id =

有人知道我能怎么实现吗？

这是我的代码：

<script type="text/javascript">
 $( document ).ready(function() {
  $('grid1').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "response1.php",
            "type": "POST",
            "error": function(){
                $("#grid_processing").css("display","none");
            }
        },
        "columnDefs": [ 
            { "targets": 0, "render": function ( data, type, full, meta ) { return  ' '+data+' '} },
            { "targets": 1, "render": function ( data, type, full, meta ) { return  '<div class="checkbox c-checkbox"><label><input type="checkbox" class="sel1"/><span class="fa fa-check"></span></label></div>'} },
            { "targets": 2, "render": function ( data, type, full, meta ) { return  ' '+data+' '} },
            { "targets": 3, "render": function ( data, type, full, meta ) { return  ' '+data+' '} },
            { "targets": 4, "render": function ( data, type, full, meta ) { return  ' '+data+' '} },
            { "targets": 5, "render": function ( data, type, full, meta ) { return  ' '} }
        ]                                    
  });   
 });
</script>

以下是创建可点击行的脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {

    var table = $('#grid1').DataTable();    
    $('#grid1').on( "click", "td", function (e) {
      var rowIdx = table.row( this ).index();
      var sData = table.cells({ row: rowIdx, column: 5 }).data()[0];
      if (sData && sData.length) {
        location.href = './test.php?id=' + sData;
      }
    });

  });
</script>

Answer 1

您可以尝试将点击选择器更改为类似

outcome

禁用特定列的location.href

1 个答案: