2016-07-30 16 views
2

私はlink.iをクリックしたときにブートストラップポップアップモーダルでajaxが返す成功データを表示しようとしていますが、どこでdatatable関数を呼び出さなければいけないのですか?ブートストラップモーダルでAJAXの成功データをデータテーブルとして表示

index.phpには、data.phpを呼び出すためのモーダルdivとajax関数があります。 jsonエンコードされた値を返すdata.php。

のindex.php

<a href="#myModal" id="custId" data-toggle="modal" data-id="" class="btn btn-primary">Show Popup</a> 


    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h5 class="modal-title"><i class="glyphicon glyphicon-list"></i> Stone Details</h5> 
      </div> 
      <div class="modal-body"> 
       <div class="fetched-data"> 
        <table id="example" class="display" cellspacing="0" width="100%"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Position</th> 
          <th>Office</th> 
         </tr> 
        </thead> 
        </table> 
       </div> 
      </div> 
      <div class="modal-footer"> 

      </div> 
     </div> 
    </div> 
</div> 



    $(document).ready(function() { 

     $('#myModal').on('show.bs.modal', function (e) { 
      var rowid = '1'; 
      var reference = '2'; 
      var nemix_id = '3'; 
      $.ajax({ 
       type : 'post', 
       url : 'data.php', //Here you will fetch records 
       data : 'rowid='+ rowid+'&reference='+reference+'&nemix_id='+nemix_id, //Pass $id 
       success : function(data){ 

        $('#example').DataTable({ 
         "ajax": data 
        }); 

       } 
      }); 


     }); 


}); 

data.php

$sql_sel = mysqli_query($con,"SELECT * FROM `table`"); 
$array = array(); 
$array['data'] = array(); 

while($res_sel = mysqli_fetch_row($sql_sel)){ 
    $array['data'][] = $res_sel; 
} 
echo json_encode($array); 

答えて

0

あなたは負荷にモーダルを表示する必要がある場合は、この試してみてください。私はそれを把握...ここ

$(document).ready(function() { 
    // show the modal onload 
    $('#myModal').modal({ 
     show: true 
    }); 
    $('#myModal').on('show.bs.modal', function (e) { 
     var rowid = '1'; 
     var reference = '2'; 
     var nemix_id = '3'; 
     $.ajax({ 
      type : 'post', 
      url : 'data.php', //Here you will fetch records 
      data : 'rowid='+ rowid+'&reference='+reference+'&nemix_id='+nemix_id, //Pass $id 
      success : function(data){ 

       $('#example').DataTable({ 
        "ajax": data 
       }); 

      } 
     }); 
    }); 
}); 
+0

しかし、私はデータテーブルで成功のデータを取得したい –

1

を私は他人のために共有しています

var table = $('#example').DataTable({ 
    "ajax": { 
      "type" : "GET", 
      "url" : "data.php", 
      "dataSrc": function (json) { 
       return json.data; 
      }  
      } 
    }); 
関連する問題