How use dataTable for table created with javascript?

How use dataTable for table created with javascript?

yefimyefim Posts: 3Questions: 2Answers: 0

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(''); var $tbody = $table.append('').children('tbody'); document.getElementById("demo").innerHTML = ""; try { $.each(dataSet, function (i) { var of = dataSet[i]; tRow = $(''); tCell = $('
NametitleDuration% CompleteFinish
').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

  • yefimyefim Posts: 3Questions: 2Answers: 0

    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,
    });

This discussion has been closed.