PHP 데이터로 폼을 업데이트하는 것은 마지막 행 (DataTable/BootStrap) 만 선택하는 것입니다.

Question

DataTable 구현에서 행을 편집하는 방법을 만들려고합니다. AdminLTE BootStrap을 사용하고 있습니다.

이 반복에서는 모달을 시작하는 각 행의 끝에 버튼이 있습니다. 버튼이 모달의 데이터를 채우고 본질적으로 행 데이터로 양식을 채워 사용자가 변경하고 다시 게시 할 수있게하고 싶습니다.

아래 내용은 폼을 업데이트한다는 점에서 "작동"하지만 내 PHP의 While 루프에서 마지막 항목 만 선택합니다.

편집 단추를 클릭 한 행의 올바른 데이터로 양식을 업데이트하려면 어떻게해야합니까? 루프를 중단하지 않고 특정 데이터를 전송하여 데이터 테이블을 계속 표시 할 수있는 방법이 있어야합니다.

표 호출

<table id="buildTracker" class="table table-bordered table-hover table-striped"> 
       <thead> 
       <tr> 
        <th>Tracker ID</th> 
        <th>INI</th> 
        <th>Owner</th> 
        <th>Entered By</th> 
        <th>Record ID</th> 
        <th>Record Name</th> 
        <th>Items</th> 
        <th>Feature</th> 
        <th>Edit</th> 
       </tr> 
       </thead> 
       <tbody> 
       <?php 
        if ($result->num_rows > 0) { 
         // output data of each row 
         while($row = $result->fetch_assoc()) { 
          echo "<tr>"; 
          echo "<td>".$row["ID"]."</td><td>".$row["INI"]."</td><td>". 
          $row["Owner"]."</td><td>". 
          $row["EnteredBy"]."</td><td>". 
          $row["RecordID"]."</td><td>".$row["RecordName"]."</td><td>". 
          $row["Items"]."</td><td>".$row["Feature"]."</td><td>"; 
          echo '<button type="button" id="edit" onclick="update()" class="btn btn-default" data-toggle="modal" data-target="#modal-default">'; 
          echo 'Edit'; 
          echo '</button>'.'</td>'; 
          echo "</tr>"; 

          echo '<script> 
            function update() { 
            document.getElementById("enteredBy").value="'.$row["EnteredBy"].'"; 
            document.getElementById("ini").value="'.$row["INI"].'"; 
            document.getElementById("recordID").value="'.$row["RecordID"].'"; 
            } 
           </script>'; 
         } 
        } else { 
         echo "0 results"; 
        } 
        $conn->close(); 

       ?> 

...

모달 및 양식

<div class="modal fade" id="modal-default"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Default Modal</h4> 
      </div> 
      <div class="modal-body"> 

      <form id="buildtrackerform" role="form" action="formSubmit.php" method="post"> 
       <div class="box-body"> 
       <div class="form-group"> 
        <div class="row"> 
        <div class="col-xs-5"> 
         <label for=>Entered By</label> 
         <input type="text" class="form-control" name="enteredBy" id="enteredBy" placeholder="Entered By"> 
        </div> 

        <div class="col-xs-2"> 
         <label for="ini">INI</label> 
         <select onChange="setOwner(this)" style="text-transform: uppercase;" class="form-control select2" style="width: 100%;" name="ini" id="ini"> 
         <option selected="selected" disabled="disabled">-Select-</option> 
         </select> 
        </div> 

        <div class="col-xs-5"> 
         <label for="owner">Owner</label> 
        <input type="text" class="form-control" name="owner" id="owner" placeholder="Nemours Owner"> 
        </div> 
        </div> 
       </div> 
       <div class="form-group"> 
       <div class="row"> 
        <div class="col-xs-6"> 
        <label for="recordID">Record ID</label> 
        <input type="text" class="form-control" name="recordID" id="recordID" placeholder="Record ID"> 
        </div> 
        <div class="col-xs-6"> 
        <label for="recordName">Record Name</label> 
        <input type="text" class="form-control" name="recordName" id="recordName" placeholder="Record Name"> 
        </div> 
       </div> 
       </div> 

       <div class="form-group"> 
       <div class="row"> 
        <div class="col-xs-12"> 
        <label>Items</label> 
         <select multiple class="form-control select2" name="items[]" id="items[]" data-placeholder="&#32;&#32;Type an item then press enter" 
         style="width: 100%;"> 
         </select> 
        </div> 
       </div> 
       </div> 

    <!-- There are more fields - I removed them for the question --> 

       </div><!-- End Box Body --> 
      </div> <!-- End Modal Body --> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
     </div> 
     <!-- /.modal-dialog --> 
    </div> 
    <!-- /.modal --> 

그리고 단지의 경우 어떤 지침이 감사 DataTable의 스크립트

<script> 
    $(function() { 
    $('#example1').DataTable() 
    $('#buildTracker').DataTable({ 
     'paging'  : true, 
     'lengthChange': true, 
     'searching' : true, 
     'ordering' : true, 
     'info'  : true, 
     'autoWidth' : true 
    }) 
    }) 
</script> 

에게있다. 감사!

Answer 1

버튼의 onclick 속성을 제거한 다음 클래스에 지정하십시오. 이 예제에서는 tableButton을 사용합니다.

$(function() { 
    $('#example1').DataTable() 
     var table = $('#buildTracker').DataTable({ 
     'paging'  : true, 
     'lengthChange': true, 
     'searching' : true, 
     'ordering' : true, 
     'info'  : true, 
     'autoWidth' : true 
    }); 
     $('.tableButton').click(function() { 
     var data = table.row($(this).parents('tr')).data(); 
     // data now contains your row data, insert it where you like 
    }) 
}) 

편집

당신을위한 포인터의 몇 : 그런 다음 자바 스크립트를 수정합니다. 현재 데이터베이스의 모든 행에 대해 반복해서 출력하는대로 원래의 코드에서 당신은이 비트를 제거해야합니다 :

echo '<script> 
           function update() { 
           document.getElementById("enteredBy").value="'.$row["EnteredBy"].'"; 
           document.getElementById("ini").value="'.$row["INI"].'"; 
           document.getElementById("recordID").value="'.$row["RecordID"].'"; 
           } 
          </script>'; 

내 원래의 코드는 내가 할 수있는 테이블을 보지 않고, 데이터를 처리하는 것을 포함하지 않았다 정확히 일치하지는 않지만 함수 내에서 변수 data은 버튼이 클릭 된 행에서 테이블의 각 열에 대한 값을 포함하는 배열이됩니다. 당신은 다음과 같이 할 수있는 기능을 수정하는 경우 당신은 아이디어를 얻을 것이다 : 당신이 다음 양식에 관련 입력의 값을 삽입하는 코드에 alert을 변경할 경우 열이 이동하는 알아 낸 후

$('.tableButton').click(function() { 
    var data = table.row($(this).parents('tr')).data(); 
    alert('First column is '+data[0]+' Second column is '+data[1]); 
}) 

.

Answer 2

이 경우 다중 데이터 태그를 사용했습니다. 나는 miknik의 제안과 비슷하지만 data() 기능을 사용하지 않는 것과 같다고 생각합니다. 버튼을 만들 때 다음과 같이 울립니다.

data-id="'.$row["ID"].'" data-enteredBy="'.$row["EnteredBy"].'"

그럼 내가 이것을 활용하는 방법을 완전히 확실하지 않다 바닥

<script> 
    $('#modal-default').on('show.bs.modal', function (e) { 
    var rowID = $(e.relatedTarget).attr('data-id'); 
    $(this).find('#rowID').val(rowID); 

    var enteredBy = $(e.relatedTarget).attr('data-enteredBy'); 
    $(this).find('#enteredBy').val(enteredBy); 

    //pass multiple data with data() 
}); 
</script>