I’m trying to use dataTable Plugin for table created with javascript, but with no success.
I would appreciate any help to find out where is my mistakes. Here is the code
= = = = =
@{
ViewBag.Title = "JStableTest";
}
javaScript tables created Test
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
var dataSet = [
["Task 1", "5 days", "12", "02/01/2009", "01/05/2009"],
["Task 0", "5 days", "17", "01/01/2009", "02/05/2009"],
["Task 2", "5 days", "3", "07/01/2009", "03/05/2009"],
["Task 3", "5 days", "7", "01/01/2009", "01/05/2009"],
["Task 4", "5 days", "81", "07/01/2009", "03/05/2009"],
["Task 5", "5 days", "16", "01/01/2009", "01/05/2009"],
["Task 6", "5 days", "55", "07/01/2009", "04/05/2009"],
["Task 7", "5 days", "47", "07/01/2009", "05/05/2009 "],
["Task 8", "5 days", "22", "05/01/2009", "07/05/2009"],
["Task 9", "5 days", "82", "02/01/2009", "01/05/2009"],
["Task 10", "5 days", "8", "03/01/2009", "09/05/2009"],
["Task 11", "5 days", "78", "09/01/2009", "02/05/2009"],
["Task 12", "5 days", "17", "08/01/2009", "01/05/2009"],
["Task 13", "5 days", "53", "07/01/2009", "04/05/2009"],
["Task 14", "5 days", "38", "05/01/2009", "03/05/2009"],
["Task 15", "5 days", "53", "04/01/2009", "01/05/2009"],
["Task 16", "5 days", "69", "06/01/2009", "02/05/2009"],
["Task 17", "5 days", "81", "01/01/2009", "01/05/2009"],
["Task 18", "5 days", "36", "02/01/2009", "04/05/2009"],
["Task 19", "5 days", "60", "03/01/2009", "06/05/2009"],
["Task 20", "5 days", "5", "04/01/2009", "07/05/2009"],
["Task 21", " days", "21", "01/01/2009", "09/05/2009"],
["Task 22", "5 days", "42", "05/01/2009", "07/05/2009"],
];
function makeTable() {
var $table = $('
');
$(window).resize(function () {
table.fnAdjustColumnSizing();
});
$table.append('').children('thead')
.append('Name | title | Duration | % Complete | | Finish |
');
var $tbody = $table.append('').children('tbody');
document.getElementById("demo").innerHTML = "";
try {
$.each(dataSet, function (i) {
var of = dataSet[i];
tRow = $('');
tCell = $('').html(of[0]);
tRow.append(tCell);
tCell = $(' | ').html(of[1]);
tRow.append(tCell);
tCell = $(' | ').html(of[2]);
tRow.append(tCell);
tCell = $(' | ').html(of[3]);
tRow.append(tCell);
tCell = $(' | ').html(of[4]);
tRow.append(tCell);
$tbody.append(tRow);
});
}
catch (e) {
e.message();
}
$table.appendTo('#demo');
//
$('#example').dataTable(
{
paging: false,
scrollX: true,
scrollY: 400,
});
};
</head>
<body onload="makeTable()">
<dev id="demo"></dev>
</body>
|
Answers
Sorry for bothering.
Here is solution:
$('#example').dataTable( {
paging: false,
scrollX: true,
scrollY: 400, });
Replaced with
jQuery($table).dataTable({
paging: false,
scrollX: true,
scrollY: 200,
});