データテーブルのみ最初の行はjqueryを受け取ります。

Question

データテーブルの最初の行のみが自分のvar selを受け取ります。

varはHTMLドロップダウンから値が与えられます。最初の行の印刷ボタンをクリックすると、varにURLが渡されます。選択オプションを変更すると、varが更新されます。

他の行をクリックすると、varは定義されていません。

    <script type="text/javascript"> 
        function datatableHandler (sel) 
        { 
         $('#workorder').DataTable().destroy(); 

         var table = $('#workorder').DataTable({ 
          //display columns 
          "columns": [ 
           //display action buttons 
           {"mData": "idWorkOrder", 
            "mRender": function (data, type, row) { 
             return '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+ 
              '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+ 
              '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>'; 
            } 
           }, 
           {"data": "cFirstName"}, 
           {"data": "cLastName"}, 
           {"data": "wRoofContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wSidingContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wGutterContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')} 
          ], 
          "processing": true, 
          "serverSide": true, 
          "responsive": true, 
          "ajax": { 
           url: 'datatables.php', 
           type: 'POST' 
          } 
         }); 
         table.draw(false); 
        } 
        $(document).ready(function() { 
         $('#multipleSelect').on('change', function() { 
          sel = $(this).val(); 
          console.log(sel); 

          datatableHandler (sel); 
         }); 
         $('#workorder').DataTable().destroy(); 

         var table = $('#workorder').DataTable({ 
          //display columns 
          "columns": [ 
           //display action buttons 
           {"mData": "idWorkOrder", 
            "mRender": function (data, type, row) { 
            sel=1; 
             return '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+ 
              '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+ 
              '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>'; 
            } 
           }, 
           {"data": "cFirstName"}, 
           {"data": "cLastName"}, 
           {"data": "wRoofContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wSidingContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wGutterContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')} 
          ], 
          "processing": true, 
          "serverSide": true, 
          "responsive": true, 
          "ajax": { 
           url: 'datatables.php', 
           type: 'POST' 
          } 
         }); 
         table.draw(false); 

        }); 
       </script> 

Answer 1

データテーブルが更新されたselの値を取得できるように、変更イベントでデータテーブル関数を呼び出す必要があります。

私は、multi selectのchangeイベントに対してdatatableHandler関数を呼び出し、値selをその関数に渡しました。

 <script type="text/javascript"> 


      function datatableHandler (var sel) { 
// destroy the datatable 

$('#workorder').DataTable().destroy(); 

      var table = $('#workorder').DataTable({ 
          //display columns 
          "columns": [ 
           //display action buttons 
           {"mData": "idWorkOrder", 
            "mRender": function (data, type, row) { 
            return '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+ 
              '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+ 
              '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>'; 
            } 
           }, 
           {"data": "cFirstName"}, 
           {"data": "cLastName"}, 
           {"data": "wRoofContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wSidingContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')}, 
           {"data": "wGutterContract", render: $.fn.dataTable.render.number(',', '.', 0, '$')} 
          ], 
          "processing": true, 
          "serverSide": true, 
          "responsive": true, 
          "ajax": { 
           url: 'datatables.php', 
           type: 'POST' 
           } 
         }); 
         table.draw(false); 
        };  

      $(document).ready(function() { 
          var sel; 
          $('#multipleSelect').on('change', function() { 
           sel = $(this).val(); 
           console.log(sel); 

           //call datatable handler function with value sel 
           datatableHandler(sel); 
          }); 
        }); 
    </script>