.datatable function is not working after ajax call

hkg · November 2016

Guys please help me.

I am using datatable() function in Jsp page then I call ajax function to load my table data. after ajax call data table() function is not working blow is code which I trying to load.

$('.mytable').dataTable({
"scrollY": 200,
"paging": false,
"bFilter": false,
"ordering": false,
"info": false,
"sScrollX":true
});

Thanks

allan · November 2016

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

hkg · November 2016

Hi Allan thanks for your reply.

This code is on my local machine so I am not able to provide the link but I can provide the full code which is using ..

=======JSP Page======

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="../Assets/js/Admin.js"></script>
<link rel="stylesheet" type="text/css" href="../Datatable/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../Datatable/css/dataTables.bootstrap.min.css">
<style type="text/css">
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
</style>
<title>Demo Table::</title>
</head>
<body>

    <div class="container-fluid">
        <%@include file="Admin_header.jsp"%>
        <div class="row" style="margin-top: 50px;">
            <br/>
            <div class="btn-group">
                <a class="btn btn-primary" onclick="Show_Demo_Data();">Show Data</a>
                <button class="btn-link" onclick="Demo_New_ROW()"><span title="Add a Row"class="glyphicon glyphicon-plus-sign"></span></button>
                <button class="btn-link" onclick="Demo_Remove_Row()"><span title="Remove a Row"class="glyphicon glyphicon-minus-sign"></span></button>
                <button class="btn btn-primary" form="myform">Save</button>
            </div>
            <!--                <form id="myform" action="../Ins_Upd_Demo_Data" method="post">
                                <table class="table table-bordered" id="Mytable">
                                    <thead class="bg-primary">
                                    <td> <span class="glyphicon glyphicon-edit"></span></td>
                                    <td><span class="glyphicon glyphicon-remove"></span></td>
                                    <td>ID</td>
                                    <td> Question</td>
                                    <td> Option 1</td>
                                    <td> Option 2</td>
                                    <td> Option 3</td>
                                    <td> Option 4</td>
                                    <td> Answer</td>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </form>-->
            <table class="table table-bordered" id="Mytable">
                <thead class="bg-primary">
                    <tr>
                        <th> <span class="glyphicon glyphicon-edit"></span></th>
                        <th><span class="glyphicon glyphicon-remove"></span></th>
                        <th>ID</th>
                        <th> Question</th>
                        <th> Option 1</th>
                        <th> Option 2</th>
                        <th> Option 3</th>
                        <th> Option 4</th>
                        <th> Answer</th>
                    </tr>
                </thead>
                <tbody id="Demodata">
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="../Datatable/js/jquery.js"></script> 
    <script type="text/javascript" src="../Datatable/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="../Datatable/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="../Datatable/js/dataTables.bootstrap.min.js"></script> 
    <script>
                    $("#Mytable").dataTable({
                        "scrollY": 100,
                        "scrollX": true,
                        "paging": false,
                        "bFilter": false,
                        "ordering": false,
                        "info": false
                    });
    </script> 
</body>

</html>

===================Admin.js=========

function Show_Demo_Data() {
$.ajax({
url: '../Show_Demo_Data',
type: 'post',
async: false,
dataType: 'json',
success: function (data) {
var count = data.Show_Demo.length;
var str = '';
for (i = 0; i < count; i++) {
str += '<tr id="row' + i + '">';
str += '<td><input class="edit" type="checkbox" name="type" value="update"></td>';
str += '<td><img id="remove" src="../images/delete.png" width="20px" height="20px"/></td>';
str += '<td><input id="rowid" name="rowid" value="' + data.Show_Demo[i].rowid + '" disabled></td>';
str += '<td><input name="Que" value="' + data.Show_Demo[i].question + '" size="60" title="' + data.Show_Demo[i].question + '" disabled></td>';
str += '<td><input name="Op1" value="' + data.Show_Demo[i].op1 + '" title="' + data.Show_Demo[i].op1 + '" disabled></td>';
str += '<td><input name="Op2" value="' + data.Show_Demo[i].op2 + '" title="' + data.Show_Demo[i].op2 + '" disabled></td>';
str += '<td><input name="Op3" value="' + data.Show_Demo[i].op3 + '" title="' + data.Show_Demo[i].op3 + '" disabled></td>';
str += '<td><input name="Op4" value="' + data.Show_Demo[i].op4 + '" title="' + data.Show_Demo[i].op4 + '" disabled></td>';
str += '<td><input name="Ans" value="' + data.Show_Demo[i].Answer + '" title="' + data.Show_Demo[i].Answer + '" disabled></td>';
str += '</tr>';
}

        $('#Demodata').html(str);
    }
});

========================================
Note: -In js getting data from DB.

After click on show data, Data is showing in my JSP page but header is not working.

I hope you will get the error..

Please reply me..

Thankssss

allan · November 2016

If you could create a test page showing the issue using JSFiddle, CodePen, JSBin or similar, I'd be happy to take a look.

Allan

.datatable function is not working after ajax call

.datatable function is not working after ajax call

Answers

Howdy, Stranger!

Categories

DataTables

.datatable function is not working after ajax call

.datatable function is not working after ajax call

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables