时间戳

首页 > 解决方案 > 保存数据后使用数据表加载 ajax 数据

javascript - 保存数据后使用数据表加载 ajax 数据

问题描述

提交数据后，我的数据表和 ajax 出现了一些问题，并且没有出现新数据。

但如果没有使用数据表，数据可以很好地显示

我正在使用 codeigniter 和 jquery

这是我的视图功能

    function main_cat(){

        $.ajax({
            type  : 'ajax',
            url   : '<?php echo base_url()?>admin_ajx/categories_ajx/view_main_categories',
            async : false,
            dataType : 'json',
            success : function(data){

                var html = '';
                var i;
                for(i=0; i<data.length; i++){
                    html += '<tr>'+
                            '<td>'+data[i].cat_id+'</td>'+
                            '<td>'+data[i].cat_name+'</td>'+
                            '<td>'+data[i].cat_stat+'</td>'+
                            '<td><a  value="Edit MainCat" id="'+data[i].cat_id+'" class="btn btn-xs btn-warning edit_maincat">edit</td>'+
                            '</tr>';
                }
                $('#show_main_cat').html(html);

                }
            });
        }

这是我的提交功能

        $(document).ready(function(){  
                $(".save_main_cat").click(function(){
                        var data = $('.add_main_categories').serialize();
                        $.ajax({
                                type: 'POST',
                                url: "<?= base_url() ?>admin_ajx/categories_ajx/update_main_categories",
                                data: data,
                                success: function() {

                                    $('#addCat').modal('hide');
                                    $(".add_main_categories")[0].reset();
                                    $("#mydata").ajax.reload();  


                                    $(document).ready(function(){   
                                    main_cat(), main_cat_option();  
                                    }); 
                                }
                            });
                        });
                    });

数据表

     $(document).ready(function(){
      $('#mydata').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true

        });
    });

我希望在添加一些数据后出现输出数据

标签： javascriptjqueryajaxcodeignitercodeigniter-3

解决方案

请检查以下代码，它将解决您的问题

var table;

$(document).ready(function(){  

    main_cat();
    main_cat_option(); 

    table = $('#mydata').DataTable({
        'paging'      : true,
        'lengthChange': false,
        'searching'   : false,
        'ordering'    : true,
        'info'        : true,
        'autoWidth'   : true
    });

    $(".save_main_cat").click(function(){
        var data = $('.add_main_categories').serialize();
        $.ajax({
            type: 'POST',
            url: "<?= base_url() ?>admin_ajx/categories_ajx/update_main_categories",
            data: data,
            success: function() {

                $('#addCat').modal('hide');
                $(".add_main_categories")[0].reset();
                main_cat();
            }
        });
    });
});

function main_cat(){
    $.ajax({
        type  : 'ajax',
        url   : '<?php echo base_url()?>admin_ajx/categories_ajx/view_main_categories',
        async : false,
        dataType : 'json',
        success : function(data){

            var html = '';
            var i;
            for(i=0; i<data.length; i++){
                html += '<tr>'+
                        '<td>'+data[i].cat_id+'</td>'+
                        '<td>'+data[i].cat_name+'</td>'+
                        '<td>'+data[i].cat_stat+'</td>'+
                        '<td><a  value="Edit MainCat" id="'+data[i].cat_id+'" class="btn btn-xs btn-warning edit_maincat">edit</td>'+
                        '</tr>';
            }
            table.rows.add($(html)).draw();

            }
    });
}

推荐阅读