Как использовать datatable с динамически созданной таблицей

У меня есть jsp, который onload вызывает js, в котором таблица создается динамически. Ситуация в том, что я никогда раньше не работал над jquery, все, что я знаю, это javascript.Как использовать datatable с динамически созданной таблицей

Я сделал два сценария:

регистр один: когда я создаю статическую таблицу на самой странице JSP она работает безупречно. case two: когда я пытаюсь загрузить ту же таблицу, которая создается динамическим javascript, она терпит неудачу.

Случай I Рабочий код

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>JSP Page</title> 
<script src="../js/jquery.js"></script> 
<script type="text/javascript" src="../js/createDynamicTable.js"></script> 
<script type="text/javascript" src="../js/jquery.dataTables.js"></script> 

<script> 
$(document).ready(function() { 
$('#testTable').dataTable(); 
}); 

</script> 
</head> 
<body> 


<div id="tableDataDiv"> 
<table id="testTable"> 
<thead>     
<th>h1</th> 
<th>h2</th> 
<th>h3</th>     
</thead> 


<tbody> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
</tr> 
<tr> 
<td>4</td> 
<td>5</td> 
<td>6</td> 
</tr> 
<tr> 
<td>7</td> 
<td>8</td> 
<td>9</td> 
</tr> 
</tbody> 
</table> 
</div> 
</body> 
</html>

Случай II не работает код

код JSP

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>JSP Page</title> 
<script src="../js/jquery.js"></script> 
<script type="text/javascript" src="../js/createDynamicTable.js"></script> 
<script type="text/javascript" src="../js/jquery.dataTables.js"></script> 

<script> 
$(document).ready(function() { 
$('#testTable').dataTable(); 
}); 

</script> 
</head> 
<body onload="getTableData();"> 


<div id="tableDataDiv"> 

</div> 
</body> 
</html> 


js code 

function getTableData(){ 

var tableDataDivObj = document.getElementById("tableDataDiv"); 

var tableObj = document.createElement("table"); 
tableObj.id = 'testTable'; 

// header 
var theadObj = document.createElement("thead"); 

var thObj = document.createElement("th"); 
thObj.innerHTML = 'h1'; 
theadObj.appendChild(thObj); 

thObj = document.createElement("th"); 
thObj.innerHTML = 'h2'; 
theadObj.appendChild(thObj); 

thObj = document.createElement("th"); 
thObj.innerHTML = 'h3'; 
theadObj.appendChild(thObj); 

tableObj.appendChild(theadObj); 

// body 
var tbodyObj; 
var trObj; 
var tdObj; 
tbodyObj = document.createElement("tbody"); 

var count = 1; 
for(i = 0; i < 3; i++){ 
trObj = document.createElement("tr"); 

for(j = 0; j < 3; j++){ 
tdObj = document.createElement("td"); 
tdObj.innerHTML = count; 
trObj.appendChild(tdObj); 
count++; 
} 

tbodyObj.appendChild(trObj); 
} 


tableObj.appendChild(tbodyObj); 

tableDataDivObj.appendChild(tableObj); 
}

После того как таблица создается динамически, мы добавляем его в DIV на странице JSP ,

Просьба предложить любые изменения, предложения, чтобы я мог получить этот код. Это просто пример, который я создал из моего настоящего приложения. , который включает полный mvc, где данные таблицы извлекаются из методов службы и dao-файлов. Я могу получить данные в таблицу (я убедился после получения предупреждения на странице jsp). Я не могу использовать datatable по идентификатору таблицы.

Заранее благодарен!

источник

2013-02-15 Gaurav Arya

При запуске инициализации dataTables таблица не существует да. Вы можете исправить, перемещая $('#testTable').dataTable(); после того, как таблица была инициализирована.

$(tableObj).dataTable();

в конце функции getTableData (которые должны быть определены в вашем $(document).ready обратного вызова.

источник

2013-02-15 09:13:21 amccausl

так это то, что я сделал сейчас, и получил другую ошибку: –

так это то, что я сделал, как по предложению: я переехал код вызова из JSP страницы Js страницы сразу после таблицы создано. tableObj.appendChild (tbodyObj); таблицаDataDivObj.appendChild (tableObj); $ ('# testTable'). DataTable(); У меня, однако, появилась следующая ошибка javascript: aaSorting - это нулевой объект или не объект любезное руководство, что теперь делать. –

на jsp, теперь я вызываю свой метод getTableData() внутри функции document.ready. Я думаю, что это эквивалентно вызову моего метода onload = getTableData() на html ... Так что все же получил тот же результат aaSorting имеет значение null или а не объект. –

Пожалуйста, вызовите метод Jquery как только ваша таблица получить созданный динамический JavaScript.

источник

2013-02-15 09:16:06

Вы можете найти пример здесь как создать динамически: http://datatables.net/release-datatables/examples/data_sources/js_array.html

источник

2013-02-15 13:16:53 Alex

Связанный пример для DOM, который уже имеет статическую таблицу. Речь идет о неопределенной таблице, созданной «на лету». – Ben

Yon может добавить datatable к вашей динамически созданной таблице в javascript.Code выглядит следующим образом:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
function createTable(){ 

var myTableDiv = document.getElementById("box"); 
var table = document.createElement('TABLE'); 
table.id='tableId' 
table.border='1'; 

var header = table.createTHead(); 
var row = header.insertRow(0); 
var cell = row.insertCell(0); 
var cell1 = row.insertCell(1); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(1); 
cell.innerHTML = "<b>Name</b>"; 
cell1.innerHTML = "<b>Age</b>"; 
cell2.innerHTML = "<b>Email</b>"; 
cell3.innerHTML = "<b>address</b>"; 

var tableBody = document.createElement('TBODY'); 
table.appendChild(tableBody); 

for (var i=0; i<3; i++){ 
var tr = document.createElement('TR'); 
tableBody.appendChild(tr); 

for (var j=0; j<4; j++){ 
    var td = document.createElement('TD'); 
    td.width='75'; 
    td.appendChild(document.createTextNode("Cell " + i + "," + j)); 
    tr.appendChild(td); 
} 
} 
myTableDiv.appendChild(table); 
$("#tableId").dataTable(); 
} 
</head> 
<body> 
<input type="button" onclick="createTable();" value="CreateTable" /></br> 
<div id="box"> 
</div> 
</body> 
</html>

источник

2015-06-22 11:12:05

Как использовать datatable с динамически созданной таблицей

ответ

Смежные вопросы