首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用Codeigniter中的数据发送ajax请求

如何用Codeigniter中的数据发送ajax请求
EN

Stack Overflow用户
提问于 2019-03-27 16:08:49
回答 3查看 362关注 0票数 0

我在我的ignited_datatables https://github.com/IgnitedDatatables/Ignited-Datatables中使用了这个CodeIgniter project。它成功地从data返回database。但是主要的problem是,当我添加一个new record时,新插入的数据不会显示在表automatically中,当我在页面上显示refresh时,newly inserted数据就会显示在table中。因此,我想通过ajax自动显示数据,并且我不需要refresh页面。

My View

代码语言:javascript
运行
复制
<div class="box-body table-responsive">
    <table id="Slider_table" class="table table-bordered table-hover">
       <thead>
         <tr>
           <th>ID</th>
           <th>Title</th>
           <th>item_Price</th>
           <th>Description</th>
           <th>Status</th>
           <th>Action</th>
         </tr>
       </thead>
       <tbody>
       </tbody>
    </table>
</div><!-- /.box-body -->

这个脚本在视图

代码语言:javascript
运行
复制
$(document).ready(function() {
    $("#Slider_table").dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxDataProp": "data",
        "fnServerData": function(sSource, aoData, fnCallback){
            $.ajax({
                "dataType": "json",
                "type"    : "POST",
                "url"     : "'.base_url().'Home/items_list/list",
                "data"    : aoData,
                "success" : function(res){

                 fnCallback(res);
                }
            });
        }
    });
  });
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-03-28 03:56:09

我认为,在成功之后,需要使用draw()方法,以便更新表的显示。

代码语言:javascript
运行
复制
    table.row.add( {
            //you dynamic data
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        } ).draw(); 

根据文件。请参阅画()

票数 0
EN

Stack Overflow用户

发布于 2019-03-28 04:48:52

可以使用ajax.reload()方法

代码语言:javascript
运行
复制
     var i=1;
     
     function datatable()
     {  
    $("#myTable1").dataTable().fnDestroy();
  
         $('#myTable1').DataTable({
             "ordering": true,
             "searching": true,
             "bPaginate": true,
   ajax: 'myajaxURL.php', 
   columns : [
     { "render": function ( data, type, full, meta ) { return i++;   }
       },
     {"data": "col1"},
     {"data": "col2"},
     {"data": "col3"},
    ]
});
     }
     
function insertData { 
      //after each insertion do this
     var i=1;
     $('#myTable1').DataTable().ajax.reload(); 
      //after each insertion do this
}
     $(document).ready(function () {
    
     datatable();
});

票数 0
EN

Stack Overflow用户

发布于 2019-03-28 06:28:47

我总是在页面的每一个视图中都这样做。

代码语言:javascript
运行
复制
 var table;
 table = $('#Slider_table').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,            // OPTIONAL
    "bSorting": false,
    "bInfo": true,
    "bAutoWidth": false,
 });
   function getData() {

     $.ajax({
     type: "POST",
     url: "<?php echo base_url('your_controler/function_name'); ?>",
     data: aoData,
     error: function(response) {
       alert('Error')
     },
    success: function(response) {
       setTable(response);
    }
  });
 }

 function setTable(response) {
   var obj = JSON.parse(response);
   var t = $('#Slider_table').dataTable();
   t.clear().draw();
   $.each(obj, function(index, value) {
        var a = value.a;
        var b = value.b;
        var c = value.c;
        t.row.add([
           a,
           b,
           c
        ]).draw(false);  
   })
 }

因此,每次重新加载或插入新数据时,只需调用getData()函数即可加载刚插入的新数据集。t.clear().draw();将清除来自tbody的所有数据,并替换为新的数据。希望这能有所帮助

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55381781

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档