JQuery 2データテーブルは1ページを使用

Question

私のページには2つのテーブルがあります。このデータはAjaxを使用しています。今、私はデフォルトを追加ボタンのように含むを追加したい。ボタンをクリックすると、IDとともに表示されます。しかし、私は通常、1つのテーブルのためにその作業を行います。しかし、私は異なるIDを持つ2つのテーブルを使用すると、それが動作しないIDは正確に表示されません。

$(function() { 
     var table = $('#example6').DataTable({ 
      'paging': true, 
      "serverSide": true, 
      ajax: { 
       url: "{{ url('/manage-order/data') }}", 
       type: 'post' 
      }, 

      "columns": [ 

       {"data": "vn_name"}, 
       {"data": "vn_id"}, 
       {"data": "total_payment_amount"}, 
       {"data": "total_due_ammont"}, 

       { 
        "data": null, 
        "defaultContent": "<a id='addBtn' class='btn btn-success btn-xs' title='Add Purchase'>\n" + 
        "<span class='glyphicon glyphicon-plus'></span>\n" + 
        "</a>\n" 
       } 
      ] 
     }); 

     var table = $('#example5').DataTable({ 
      'paging': true, 
      "serverSide": true, 
      ajax: { 
       url: "{{ url('/manage-general-sales/data') }}", 
       type: 'post' 
      }, 
      "columns": [ 

       {"data": "vendor_name"}, 
       {"data": "total_payment_amount"}, 
       {"data": "total_due_amount"}, 
       { 
        "data": null, 
        "defaultContent": "<a id='addBtnGneral' class='btn btn-success btn-xs' title='Add Purchase'>\n" + 
        "<span class='glyphicon glyphicon-plus'></span>\n" + 
        "</a>\n" 
       } 
      ] 
     }); 
     $('#example6 tbody').on('click', '#addBtn', function() { 
      var data = table.row($(this).parents('tr')).data(); 
      var vn_id = data['vn_id']; 
      var url = "{{url('/create-order/')}}/" + vn_id; 
      window.location.href = url; 
     }); 


     $('#example5 tbody').on('click', '#addBtnGneral', function() { 
      var data = table.row($(this).parents('tr')).data(); 
      var id = data['id']; 
      var url = "{{url('/create-general-sales/')}}/" + id; 
      window.location.href = url; 
     }); 

    }) 

いくつかお手伝いをしてください。

Answer 1

同じtable変数を使用した場合、それらを使用していくつかのアクションを実行する必要があります。

$(function() { 
     var table1 = $('#example6').DataTable({ 
      'paging': true, 
      "serverSide": true, 
      ajax: { 
       url: "{{ url('/manage-order/data') }}", 
       type: 'post' 
      }, 

      "columns": [ 

       {"data": "vn_name"}, 
       {"data": "vn_id"}, 
       {"data": "total_payment_amount"}, 
       {"data": "total_due_ammont"}, 

       { 
        "data": null, 
        "defaultContent": "<a id='addBtn' class='btn btn-success btn-xs' title='Add Purchase'>\n" + 
        "<span class='glyphicon glyphicon-plus'></span>\n" + 
        "</a>\n" 
       } 
      ] 
     }); 

     var table2 = $('#example5').DataTable({ 
      'paging': true, 
      "serverSide": true, 
      ajax: { 
       url: "{{ url('/manage-general-sales/data') }}", 
       type: 'post' 
      }, 
      "columns": [ 

       {"data": "vendor_name"}, 
       {"data": "total_payment_amount"}, 
       {"data": "total_due_amount"}, 
       { 
        "data": null, 
        "defaultContent": "<a id='addBtnGneral' class='btn btn-success btn-xs' title='Add Purchase'>\n" + 
        "<span class='glyphicon glyphicon-plus'></span>\n" + 
        "</a>\n" 
       } 
      ] 
     }); 
     $('#example6 tbody').on('click', '#addBtn', function() { 
      var data = table1.row($(this).parents('tr')).data(); 
      var vn_id = data['vn_id']; 
      var url = "{{url('/create-order/')}}/" + vn_id; 
      window.location.href = url; 
     }); 


     $('#example5 tbody').on('click', '#addBtnGneral', function() { 
      var data = table2.row($(this).parents('tr')).data(); 
      var id = data['id']; 
      var url = "{{url('/create-general-sales/')}}/" + id; 
      window.location.href = url; 
     }); 

    })