My datatable disappears on init

My datatable disappears on init

gburns53gburns53 Posts: 8Questions: 2Answers: 0
edited September 2018 in Free community support

All I'm doing is trying to create the data dynamically based on user text input "Enter". I'd like a good example of creating the table dynamically using json data for column names. But 1 step at a time. Can't get by this. The data populates and disappears in a blink of the eye. This site has no examples outside of document ready. Yes, that works. I don't want that.

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/dataTables.jqueryui.min.js"></script>

<script type="text/javascript">

function dTable(str){
    str = 'json/' + str + '.json'
    
    $('#dTable').DataTable( {
        ajax: str,  
        columns: [
        { data: 'user' },
        { data: 'date' },
        { data: 'tweet' }]
    } );
}
</script>

</head>
<body>
<form>
<input type="text" size="30" onkeydown = "if(event.keyCode == 13) dTable(this.value)">
<div id="livesearch"></div>
</form>
<div id="result"></div>

<table class="display" id="dTable">

<thead>
<th><a href="#">User</a></th>
<th><a href="#">Date</a></th>
<th><a href="#">Tweet</a></th>
</thead>
</table> 

</body></html>

This question has an accepted answers - jump to answer

Answers

  • gburns53gburns53 Posts: 8Questions: 2Answers: 0
    edited September 2018

    I'm running ezphp server local win10 directory. But it's simply index.html page... in case this somehow matters

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    I took your code and created a test case for you:
    http://live.datatables.net/kigibofi/1/edit

    I removed the `-tag form> and the Datatable now remains. Why the form clears the page I don't know. Maybe removing it will help your page.

    Kevin

  • gburns53gburns53 Posts: 8Questions: 2Answers: 0
    edited September 2018

    Thank you JFC. I guess I don't have your instincts. Haven't done web stuff in some time. I thought the problem was my misunderstanding of initialization. So many hours because I copied some search box code. oof

This discussion has been closed.