追加数据表成功,但thead部分消失了

时间:2016-08-04 03:42:36

标签: javascript jquery datatables

我尝试使用<table width="100%" id="tbltbl" class="asoy table table-bordered table-striped"> <thead> <tr> <th width="1%">No</th> <th width="14%">Outlet</th> <th width="14%">Leader</th> <th width="14%">Chief</th> <th width="14%">RM</th> <th> Action </th> </tr> </thead> </table> 来填补我的表格。请看一下

onchange

默认我的表看起来像这样 enter image description here 我运行[{"OutletCode":"K-BDIP3","Description":"BANDUNG INDAH PLAZA 3","NipLeader":"0802400","NipRM":"0802678" ,"NipChief":"-"},{"OutletCode":"K-CMHM2","Description":"KIOS CIMAHI MALL 2","NipLeader":"0802400","NipRM" :"0802678","NipChief":"-"},{"OutletCode":"K-TSPA3","Description":"TASIK PLAZA ASIA 3","NipLeader":"0802400" ,"NipRM":"0802678","NipChief":"-"},{"OutletCode":"K-BDCW2","Description":"KIOS BANDUNG CIWALK 2","NipLeader" :"0802400","NipRM":"0802678","NipChief":"-"}] 方法,然后收到此

function byarea(){
        $(".asoy").empty();
        var area = $("#pilihanarea").val();
        var tipe = $('#tipe').val();
        var formUrl = "<?=base_url();?>arealeader/finddata";
        var angka = 1;
            $.ajax({
                url: formUrl,
                type: 'POST',
                 data: {tipe:tipe,area:area},
                success: function(data, textStatus, jqXHR){
                    var newdata = JSON.parse(data);
                     $.each(newdata, function(key, val) {
                        $('.asoy').append('<tbody><tr> <td>'+ (angka++) +'</td>' + 
                                            '<td>' + val.OutletCode + '</td>' + 
                                            '<td>' + val.NipLeader + '</td>' + 
                                            '<td>' + val.NipChief +'</td>' + 
                                            '<td>' + val.NipRM +'</td>' + 
                                            '<td>----</td>' + 
                                            '</tr></tbody></thead>');
                        });
                }
            });
    }

然后我追加它

<thead>..</thead>

我的表看起来像这样

enter image description here

似乎我失去了var textBoxVal = $('#myTextBox').val(); int periodCount = 0; for (var i = 0; i < textBoxVal.length; i++) { if (textBoxVal[i] === '.') { periodCount++; } } 部分。对此有何解决方案?提前谢谢......

2 个答案:

答案 0 :(得分:2)

在结束<tbody class="asoy"></tbody>标记之前创建一个空的</table>,并从<table>标记中删除“asoy”类。然后从您对<tbody>

的通话中删除append()标记

目前,您的$(".asoy").empty();正在删除整个表格内容,但您只想清除正文,而不是标题。创建<tbody>标记可以解决该问题,同时仍允许您的函数重入(即您可以在以后再次运行它并且不会复制内容)。

答案 1 :(得分:-1)

根据您的代码

 $('.asoy').append('<tbody>
                           <tr> <td>'+ (angka++) +'</td>' + 
                               '<td>' + val.OutletCode + '</td>' + 
                               '<td>' + val.NipLeader + '</td>' + 
                               '<td>' + val.NipChief +'</td>' + 
                               '<td>' + val.NipRM +'</td>' + 
                                '<td>----</td>' + 
                               '</tr>
                     </tbody>
                     </thead>'); // <--- What this tag for? 
                                      I'm not sure but I think its a wrong tagging. 
                                      tbody should not be inside a thead unless your 
                                      header will consist of another table element