当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Dynamically created datatable is not becoming the part of original datatable

问题描述:

in my MVC4 application, i'm using bootstrap to populate datatable contents in the form of table that provides search-box to search on real time. i have hard-coded a row and then send ajax call to server. and then append the result with that table.it appends the rows. problem is that it do not perform search on that newly created rows...

code

<table class="table table-striped table-bordered bootstrap-datatable datatable">

<thead>

<tr>

<th>Username</th>

<th>Date registered</th>

<th>Role</th>

<th>Status</th>

<th>Actions</th>

</tr>

</thead>

<tbody id="take">

<tr>

<td>David R</td>

<td class="center">2012/01/01</td>

<td class="center">Member</td>

<td class="center">

<span class="label label-success">Active</span>

</td>

<td class="center">

<a id="iew" class="btn btn-success" href="#">

<i class="icon-zoom-in icon-white"></i>

Download

</a>

<a id="view" class="btn btn-success" href="#">

<i class="icon-zoom-in icon-white"></i>

view

</a>

<a class="btn btn-info" href="#">

<i class="icon-edit icon-white"></i>

Edit

</a>

<a class="btn btn-danger" href="#">

<i class="icon-trash icon-white"></i>

Delete

</a>

</td>

</tr>

</tbody></table>

</div>

javascript

i call that function somehow

function show_table() {

var root = document.getElementById('take');

//var TBody = document.createElement('tbody');

var row = document.createElement('tr');

var D1 = document.createElement('td');

D1.style.textAlign = "center";

D1.appendChild(document.createTextNode("Naqvi"));

var D2 = document.createElement('td');

D2.style.textAlign = "center";

D2.appendChild(document.createTextNode("2012/01/01"));

var D3 = document.createElement('td');

D3.style.textAlign = "center";

D3.appendChild(document.createTextNode("Member"));

var D4 = document.createElement('td');

D4.style.textAlign = "center";

var S4 = document.createElement('span');

S4.className = "label label-success";

S4.appendChild(document.createTextNode("Active"));

D4.appendChild(S4);

var D5 = document.createElement('td');

D5.style.textAlign = "center";

var A1 = document.createElement('a');

A1.className='btn btn-success';

var I1 = document.createElement('i');

I1.className = "icon-zoom-in icon-white";

A1.appendChild(I1);

A1.appendChild(document.createTextNode('View'));

var A2 = document.createElement('a');

A2.className='btn btn-info';

var I2 = document.createElement('i');

I2.className = "icon-edit icon-white";

A2.appendChild(I2);

A2.appendChild(document.createTextNode('Edit'));

var A3 = document.createElement('a');

A3.className='btn btn-danger';

var I3 = document.createElement('i');

I3.className = "icon-trash icon-white";

A3.appendChild(I3);

A3.appendChild(document.createTextNode('Delete'));

var A4 = document.createElement('a');

A4.className='btn btn-primary';

var I4 = document.createElement('i');

I4.className = "icon icon-white icon-arrowthick-s";

A4.appendChild(I4);

A4.appendChild(document.createTextNode('Download'));

D5.appendChild(A1);

D5.appendChild(A2);

D5.appendChild(A3);

D5.appendChild(A4);

row.appendChild(D1); row.appendChild(D2);

row.appendChild(D3);

row.appendChild(D4);

row.appendChild(D5); <td class="center">2012/01/01</td>

root.appendChild(row);

}

hard coded result

result after calling that function :

dont know how to fix this problem. any help will be appreciated...

网友答案:

First of, if I were you I would consider using a javascript template library such as Jquery Tmpl.

Second: your javascript code is not trying to update that counter, so I don't understand what the problem is.

分享给朋友:
您可能感兴趣的文章:
随机阅读: