时间戳

首页 > 解决方案 > 当我第二次提交表单而没有刷新表单时，数据会多次附加

ajax - 当我第二次提交表单而没有刷新表单时，数据会多次附加

问题描述

通过模态时，我在 laravel 数据表插件中使用 ajax 在表中附加数据。1）。当我输入它附加在表上的数据时，但同时它在数据表中没有显示任何数据，直到我刷新它

2）。第二次当我第二次输入数据时，它会多次附加到表上

我尝试这样做来重置模态以检查它是否是由于模态内部的数据造成的，但仍然通过应用此模式隐藏和表单重置，但仍然在第二次输入时多次输入数据

$('#myModal').on('hidden.bs.modal', function () {    
    $(this).find('form').trigger('reset');
    $('#myModal').data('modal', null);
    $(this).removeData();
}

$('#submitDoc').click(function(){   
    $('.doc-form').on('submit', function(e){
    var self = this;
    e.preventDefault();
    e.stopPropagation();

    var no= {{ $no }};
    token =$('input[name=_token]').val();
    name = $('input[name=name]').val();
    start_date =  $('input[name=start_date]').val();
    end_date = $('input[name=end_date]').val();
    amount = $('input[name=amount]').val();
    image =$('input[name=select_file]').val();

    $.ajax({
        type: 'POST',
        url : '{{ URL("addDoc") }}',
        contentType: false,
        processData: false,
        data: new FormData(this)
    }).done(function(data){ 
$('.docTable').append(
            "<tr>"+"<td class='text-center'>" + no++  + "</td>" +
            "<td class='text-center'>" + data.id+ "</td>"+ 
            "<td class='text-left'>" +data.name+ "</td>"+
            "<td class='text-center'>" +start_date +
            "</td>"+"<td class='text-center'>" +end_date+ "</td>"+
            "<td class='text-right'>" +'$'+ data.amount + 
            "</td>"+"<td class='text-center'>" + 
            "<i class='fa fa-camera'></i> "+ "</td>"+"</tr>");
    });

我想在表单提交的表格中附加数据而不完美刷新它，这意味着单个输入不会多次，而且当我在数据表中提交记录时，它会增加页面过滤器中的记录条目

这是表格的截图供参考

标签： ajaxlaravelpluginsdatatable

解决方案

我已经解决了我的第一个问题，即当我在表中附加数据时，记录计数器不会增加。在表中添加行的正确方法是

t.row.add( [  count++ ,
                 id + ,
                data.name,
                start_date+ ,
                end_date,
                data.amount,
            ] ).draw( false );

并在数据表中添加 css 我们可以这样做：

var t = $(".docTable").DataTable({  
        'columnDefs': [
            {
                "targets": [0,1,3,4,6], // your case first column
                "className": "text-center",
            },
            {
                "targets": 2,
                "className": "text-left",
            },
            {
                "targets": 5,
                "className": "text-right",
            }
            ],
    });

推荐阅读