첫 번째 행만 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 값이 표시되도록 변경 이벤트에서 datatable 함수를 호출해야합니다.

나는 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>