datatable plugin not display elements after clicking again on link to show
Question
I am using data table plugin for table pagination, it work for the first time, but when I click again on link to show the table all elements of data table plugin disappears, do you know how to solve this problem. thanks.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-lg-2 sidenav">
<a href="#" id="link3" class="list-group-item">Vertical link #3</a>
</div>
<div class="col-lg-10 text-left">
<div class="row">
<div class="col-lg-12" id="content"></div>
</div>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- link3 -->
<script src="link3.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
</html>
link3.js
$(document).ready(function(){
var table = $('<table><thead><tr><th>Name</th><th>Age</th><th>Position</th><th>Note</th></tr></thead><tbody></tbody></table>').addClass('table table-bordered table-hover search-table');
$("#link3").on("click", function () {
$('#content').html(table);
$.ajax({
url:'test.json',
dataType:'json',
type:'GET',
Accept:"aplication/json",
cache:false,
success:function(data){
$.each(data, function(index, item){
var id = item.name;
var id2= item.age;
var id3=item.position;
var id4=item.note;
$(".table").append("<tr><td>"+id+"</td><td>"+id2+"</td><td>"+id3+"</td><td>"+id4+"</td></tr>");
});
$('.search-table').DataTable();
},
error:function(e){
alert("there is some thing wrong!")
}
});
});
});
test.json
[
{
"name": "Olivia Doe",
"age": "18",
"position": "SW developer",
"note": ""
},
{
"name": "Sophia Doe",
"age": "19",
"position": "Graphic",
"note": ""
},
{
"name": "Ava Doe",
"age": "20",
"position": "Project manager",
"note": ""
},
{
"name": "Joshua Doe",
"age": "21",
"position": "Analyst",
"note": ""
},
{
"name": "Viktor Doe",
"age": "22",
"position": "Analyst",
"note": ""
},
{
"name": "Ahmed Doe",
"age": "23",
"position": "Analyst",
"note": ""
},
{
"name": "Emma Doe",
"age": "24",
"position": "Analyst",
"note": ""
},
{
"name": "Evelyn Doe",
"age": "25",
"position": "Analyst",
"note": "Evelyn's work is always amazing!"
},
{
"name": "Noah Doe",
"age": "26",
"position": "Analyst",
"note": ""
},
{
"name": "Liam Doe",
"age": "27",
"position": "Analyst",
"note": ""
},
{
"name": "Mason Doe",
"age": "28",
"position": "Analyst",
"note": ""
},
{
"name": "Jacob Doe",
"age": "29",
"position": "Project manager",
"note": ""
},
{
"name": "William Doe",
"age": "30",
"position": "Project manager",
"note": ""
},
{
"name": "Ethan Doe",
"age": "18",
"position": "Project manager",
"note": "Great job Ethan\nas always!"
},
{
"name": "James Doe",
"age": "20",
"position": "Project manager",
"note": ""
},
{
"name": "Alexander Doe",
"age": "21",
"position": "Project manager",
"note": ""
}
]
4 answers
solution1
0 2017-03-31 10:30:25
Try this:
$(document).ready(function(){
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"],
[11,"Sasha","Brenna","0800 1111"],
[12,"Sage","Mia","(01012) 405872"],
[13,"Chelsea","Allistair","076 0578 0265"],
[14,"Uta","Savannah","070 1247 5884"],
[15,"Remedios","Berk","0995 181 0007"],
[16,"Ruby","Wayne","0800 1111"],
[17,"Faith","Fredericka","(01709) 099879"],
[18,"Myra","Harrison","070 4241 9576"],
[19,"Drake","Miriam","0800 733635"],
[20,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: data,
});
});
});
solution2
0 2017-03-31 10:48:08
You can bind your json from url directly to datatable using url and datasource attribute, refer
You can write your code
$('#myTable').DataTable( {
ajax: {
url: 'test.json',
dataSrc: ''
},
"columns": [
{ "data": "name" },
{ "data": "age" },
{ "data": "position" },
{ "data": "note" }
]
} );
solution3
0 2017-03-31 11:12:59
Try out the below Code It will directly add JSON to data table:
$('.search-table').DataTable({"ajax": "test.json"});
Take Reference from https://datatables.net/reference/option/ajax
solution4
0 2017-03-31 11:29:11
You can try doing this
$('#mytable').DataTable({"sAjaxSource" : "Your_url"});
Provide the url that returns your jsondata.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display multiple elements on clicking a link
Display image after clicking on img link
Hide and Show elements by clicking on a link with Java Script without Jquery
How to make swf file in full screen after clicking the button and again clicking it want to display in default size
Clicking on a link to display images
How can I show an horizontal list after clicking a link?
How to show hidden div immediately after clicking on link
How to show the content in a new tab or window after clicking on a link
How to show a hidden text box after clicking a link?
Show hidden div in page after clicking link to open the page
Related Tags