javascript - 关于dataTable修改数据，重新生成表格的-PHP中文网问答

1 需求：第一页上有一个dataTable做出的表格，其中有一个是图标按钮，点击出发模态框，模态框的content也是一个dataTable，再次点击把表格的数据更换，再次生成dataTable，但现在并不能加入新的数据
我的代码如下

<body>
<p class="container">
    <table id="tableFront">
        <thead>
        <tr>
            <th>一级类目</th>
            <th>二级类目</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>

    <!-- 点击后显示的模态框 -->
    <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <p class="modal-dialog">
            <p class="modal-content">
                <p class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        模态框（Modal）标题
                    </h4>
                </p>
                <p class="modal-body">
                    <table id="tableBack"></table>
                </p>
                
            </p><!-- /.modal-content -->
        </p><!-- /.modal -->
    </p>
</p>
<script>
    var dataBack=[
            {"name":"mike","job":"worker"},
            {"name":"lisa","job":"nurse"}
    ]

//    $("#data tbody").on("click","td.job",function(){
//        alert();
//    })

    var dataFront=[
        {"category_name":"政务","app_name":"公积金","btnModify":"<img src='modApp.png' data-toggle='modal' data-target='#myModal'/>"},
        {"category_name":"政务","app_name":"社保","btnModify":"<img src='modApp.png' data-toggle='modal' data-target='#myModal'/>"}
    ];
    $("#tableFront").DataTable({
        "data":dataFront,
        "columns":[
            {"data":"category_name"},
            {"data":"app_name"},
            {"data":"btnModify",
             "class":"btnModify"
            }
        ],
        createdRow:function( row, data, dataIndex ) {
            $("td.btnModify",row).click(function(){
            //   在这里判断第几次点击，如果不是第一次，就清出表格--》假数据--》绘制表格
                if(clickNum){
                    modalTable.clear();
                    makeModalTable.row.add({
                        "name":"jenna",
                        "job":"engineer"
                    });
                    modalTable.draw();
                }{
                    makeModalTable();
                }
                clickNum++;
            })
        }
    })
    var clickNum=0;
    var modalTable;
    function makeModalTable(){
         modalTable=$("#tableBack").DataTable({
            "data":dataBack,
            "columns":[
                {"data":"name"},
                {
                    "data":"job",
                    "class":"job"
                }
            ],
            "paging":false,
            "searching":false,
            "info":false
        })
    }
</script>
</body>