如何在 initComplete 上重新初始化 jquery 数据表？答案

【问题标题】：How to reinitialize jquery datatable on initComplete?如何在 initComplete 上重新初始化 jquery 数据表？
【发布时间】：2018-02-24 08:11:24
【问题描述】：

如何在 initComplete 事件上重新初始化 jquery 数据表。我在 initComplete 中添加了一个 ajax 调用并想替换数据表的数据我该怎么做有人知道吗？

这是我的代码。

$scope.tbOptionsrejectionreport = {
    data: [],
    bAutoWidth: false,       
    sAjaxSource: 'api/api.php?type=get_rejectionreport&status=default&managerId='+managerid+'&isAdmin='+Adminuser, 
    initComplete: function ()
    {

        $("#rejectionreportlist").click(function(){     
        $('#example_rejectionreport').DataTable().clear().destroy();
            var rejection_date = $("#rejectiondate").val();

            $http.post(
            'api/api.php?type=get_rejectionreport&rejectiondate='+rejection_date+'&managerId='+managerid+'&isAdmin='+Adminuser, 
            {

            })
        .then(function( answer) {
            //$("#example_rejectionreport").dataTable().fnDestroy();
            $("#example_rejectionreport").dataTable({
              data: [],         
              bAutoWidth: false , 
              aoColumns : [
                {   
                    sWidth: "1%",  
                    bSortable: true,                                        
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[0];

                        return tbAction;
                    }
                },
                {   
                    sWidth: "1%",                
                    bSortable: true,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[1];

                        return tbAction;
                    }
                },

                { 
                    sWidth: "5%",                
                    bSortable: false,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[2];

                        return tbAction;
                    }
                },
                { 
                    sWidth: "3%",               
                    bSortable: false,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[3];

                        return tbAction;
                    }
                },
                { 
                    sWidth: "3%",                
                    bSortable: false,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[4];

                        return tbAction;
                    }

                },
                { 
                    sWidth: "3%",                
                    bSortable: false,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[5];

                        return tbAction;
                    }

                },
                { 
                    sWidth: "3%",                
                    bSortable: false,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[6];

                        return tbAction;
                    }

                },
                { 
                    sWidth: "3%",               
                    bSortable: true,
                    mRender: function (data, type, full) {
                        var tbAction = '';

                            tbAction += full[12];

                        return tbAction;
                    }

                },       
              ],

               createdRow: function(row, data, dataIndex) {                 
                  $compile(row)($scope)
                }
            });
            /*var table = $("#example_rejectionreport").DataTable(); 
                console.log(answer.data.aaData);

                $scope.rejectionlist= answer.data.aaData;*/
            });
        });

    },  
    aoColumns: [           
        {   
            sWidth: "1%",  
            bSortable: true,                                        
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[0];

                return tbAction;
            }
        },
        {   
            sWidth: "1%",                
            bSortable: true,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[1];

                return tbAction;
            }
        },

        { 
            sWidth: "5%",                
            bSortable: false,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[2];

                return tbAction;
            }
        },
        { 
            sWidth: "3%",               
            bSortable: false,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[3];

                return tbAction;
            }
        },
        { 
            sWidth: "3%",                
            bSortable: false,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[4];

                return tbAction;
            }

        },
        { 
            sWidth: "3%",                
            bSortable: false,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[5];

                return tbAction;
            }

        },
        { 
            sWidth: "3%",                
            bSortable: false,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[6];

                return tbAction;
            }

        },
        { 
            sWidth: "3%",               
            bSortable: true,
            mRender: function (data, type, full) {
                var tbAction = '';

                    tbAction += full[12];

                return tbAction;
            }

        },               

    ],
    createdRow: function(row, data, dataIndex) {                
      $compile(row)($scope)
    }
    };

【问题讨论】：

这毫无意义。您正在尝试加载一个表，然后在用户甚至可以查看它之前自动重新加载它？我不清楚你想要完成什么。
在加载时我已经加载数据表，但现在在按钮上单击我添加 ajax 调用，然后我想更改数据表数据，我该怎么做？

标签： javascript jquery angularjs datatables

【解决方案1】：

这是我的答案终于找到了

var Adminuser =  $scope.isAdmin;
        var managerid = $scope.userID;   
        $scope.tbOptionsrejectionreport = {
        data: [],
        bAutoWidth: false,       
        sAjaxSource: 'api/api.php?type=get_rejectionreport&status=default&managerId='+managerid+'&isAdmin='+Adminuser, 
        initComplete: function ()
        {

            $("#rejectionreportlist").click(function(){     
            $('#example_rejectionreport').DataTable().clear().destroy();
                var rejection_date = $("#rejectiondate").val();

                $http.post(
                'api/api.php?type=get_rejectionreport&rejectiondate='+rejection_date+'&managerId='+managerid+'&isAdmin='+Adminuser, 
                {

                })
            .then(function( answer) {
                var data = answer.data.aaData;

                var table = $('#example_rejectionreport').DataTable({
                   destroy: true,
                   bLengthChange: false,
                   paging: true
                 });

                 $.each(data, function(i, item) {
                   //console.log("inserting", item);
                   table.row.add([
                     item['0'],
                     item['1'],
                     item['2'],
                     item['3'],
                     item['4'],
                     item['5'],
                     item['6'],
                    item['12'],
                   ]).draw();
                 });    

                });
            });

        },  
        aoColumns: [           
            {   
                sWidth: "1%",  
                bSortable: true,                                        
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[0];

                    return tbAction;
                }
            },
            {   
                sWidth: "1%",                
                bSortable: true,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[1];

                    return tbAction;
                }
            },

            { 
                sWidth: "5%",                
                bSortable: false,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[2];

                    return tbAction;
                }
            },
            { 
                sWidth: "3%",               
                bSortable: false,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[3];

                    return tbAction;
                }
            },
            { 
                sWidth: "3%",                
                bSortable: false,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[4];

                    return tbAction;
                }

            },
            { 
                sWidth: "3%",                
                bSortable: false,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[5];

                    return tbAction;
                }

            },
            { 
                sWidth: "3%",                
                bSortable: false,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[6];

                    return tbAction;
                }

            },
            { 
                sWidth: "3%",               
                bSortable: true,
                mRender: function (data, type, full) {
                    var tbAction = '';

                        tbAction += full[12];

                    return tbAction;
                }

            },               

        ],
        createdRow: function(row, data, dataIndex) {                
          $compile(row)($scope)
        }
        };

【讨论】：