首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Laravel 5.2:重绘DataTable不工作,但ajax.reload()工作

Laravel 5.2:重绘DataTable不工作,但ajax.reload()工作
EN

Stack Overflow用户
提问于 2019-04-19 02:50:03
回答 1查看 275关注 0票数 0

当我点击刷新按钮时,我得到了一个问题,Datatables没有重新绘制数据,但我可以看到Json数组即将到来。

PHP、MYSQL、LARAVEL 5.2、DATATABLES 1.10

HTML

代码语言:javascript
复制
   <table id="tblOrderList" class="table table-bordered table-hover">
    <thead>
    <tr class="warning">
    <th>#</th>
    <th>Product Code</th>
    <th>Quantity</th>
    <th>Selling Price</th>
    <th>Amount</th>
    </tr>
    </thead>
</table>

JAVASCRIPT

代码语言:javascript
复制
$(function(){
    dataTableIdGenerate = $("#tblOrderList").DataTable({
        processing: true,
        serverSide: true,       
        deferRender: true,
        scrollX:true,
        cache: false,   
        sorting: false, 
        responsive: false,      
        paging: false,
        ordering:false,
        searching:false,
        info:false,
        processData:false,
        fixedHeader: {
            header: true,
            footer: false
        },
        columns: [
            { "data": "SNo", "orderable": false },
            { "data": "productCode", "orderable": false },
            { "data": "qty", "orderable": false },
            { "data": "sellingPrice", "orderable": false },
            { "data": "amount", "orderable": false }
                    ],
        ajax: {
            url: "{{ fnGenerateUrl('orders_list') }}",
            type: "POST",
            "data":{ 
                _token: "{{csrf_token()}}",
                parentid:"{{ $order->id }}"
            }
        },          
        "language": {
            "lengthMenu": "_MENU_",
            "emptyTable": "No data found!",
            "zeroRecords": "No matching data found",
            "sProcessing": '<i class="fa fa-circle-o-notch fa-spin fa-lg"></i>&nbsp;please wait...processing...',
        },
        buttons: [
            {
                text: 'Reload',
                action: function () {
                   // table.ajax.reload();
                    fnDoOrderProductsReloadSearch();
                }
            }
        ],
        "initComplete": function( settings, json ) {

        },
            });
});


function fnDoOrderProductsReloadSearch()
{
    $('#tblOrderList').DataTable().ajax.reload(null, false);

    //$("#tblOrderList").DataTable().ajax.reload(null, false);
    //$("#tblOrderList").DataTable().ajax.reload();

    //dataTableIdGenerate.ajax.reload();
    //dataTableIdGenerate.draw();

    //$("#tblOrderList").DataTable().rows().invalidate().draw();
    //$("#tblOrderList").ajax.reload();

    //$("#tblOrderList").DataTable().draw();
    //setTimeout(function(){$("#tblOrderList_processing").hide();}, 1000);
}

输出

代码语言:javascript
复制
`{"data":[{
    "SNo":1,
    "id":"61be1780-5106-11e9-9b13-39c7d14bdcc4",
    "productCode":"10515273","qty":"<input type=\"text\" name=\"productquantity61be1780-5106-11e9-9b13-39c7d14bdcc4\" id=\"productquantity61be1780-5106-11e9-9b13-39c7d14bdcc4\" value=\"2\" onchange=\"fnOrderProductEditQuantity('61be1780-5106-11e9-9b13-39c7d14bdcc4')\"  class=\"form-control\" size=\"8\" placeholder=\"Enter the qty\" maxlength=\"20\" autocomplete=\"off\" \/>",
    ]
    "sellingPrice":"<input type=\"text\" name=\"productsellingprice61be1780-5106-11e9-9b13-39c7d14bdcc4\" id=\"productsellingprice61be1780-5106-11e9-9b13-39c7d14bdcc4\" value=\"1000\" onchange=\"fnOrderProductEditSellingPrice('61be1780-5106-11e9-9b13-39c7d14bdcc4')\" class=\"form-control\" size=\"12\" placeholder=\"Enter the unitprice\" maxlength=\"20\" autocomplete=\"off\" \/>","amount":"2,000.00"}],
"draw":1,"recordsTotal":1,"recordsFiltered":1}`

我的控制器中的

代码语言:javascript
复制
     echo json_encode(array('data' => $rows_json, "draw" => 1, "recordsTotal" => $totalRecords, "recordsFiltered" => $totalRecords));

当我更新qty和Price时,它会存储在数据库中。然后,我将使用fnDoOrderProductsReloadSearch()函数重新加载dataTables。

但它不起作用。我试过不同的方法..

你能告诉我这是什么问题吗?

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

https://stackoverflow.com/questions/55752146

复制
相关文章

相似问题

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