I'm using Twitter Bootstrap and I have a responsive table with paginator. In on load page, the pagination works, but after the Jquery Ajax event, which update the rows and data in the body table, the table do not is pagination.
Table:
<table id="tblFaltas" class="table table-striped table-bordered">
<thead id="theadFaltas">
<tr class="header">
<th rowspan="2">
Name
</th>
</tr>
<tr id="lnDia">
<th>
</th>
</tr>
</thead>
<tbody id="tBodyFaltas">
<tr>
<td>
<center>
No data
</center>
</td>
<td>
<center>
No data
</center>
</td>
</tr>
</tbody>
</table>
And a select button which call the Jquery ajax function.
Button with event onChange:
<select class="form-control" id="day" onChange="selectDay()">
<option>
</option>
</select>
Function selectDay():
function selectDay() {
$.ajax({
type: 'POST',
data: JSON.stringify(data),
cache: false,
contentType: 'application/json',
datatype: "json",
url: '/home/getdays',
success: function (returns) {
$('#tBodyFaltas').empty();
$('#tBodyFaltas').append($tr); // UPDATE THE BODY TABLE HERE
}
});
$('#tblFaltas').dataTable(); // Call the dataTable pagintator
};
My doubt is: $('#tblFaltas').dataTable(); works in this way?
You must reinitialise the dataTable completely after you have inserted new items :
function selectDay() {
$.ajax({
type: 'POST',
data: JSON.stringify(data),
cache: false,
contentType: 'application/json',
datatype: "json",
url: '/home/getdays',
success: function (returns) {
$('#tBodyFaltas').empty();
$('#tBodyFaltas').append($tr); // UPDATE THE BODY TABLE HERE
$('#tblFaltas').dataTable({
destroy : true
});
}
});
}
The destroy option let you reinitialise an existing dataTable instance (if any) without conflicts.
Related
Below I've added my full Index.cshtml code. In ajax call it's hitting to success method. but i'm not able to reload or refresh the table without page refresh.
The below code is simple while clicking the submit button for filters i'm calling SubmitFilter method it redirect to c# method there i'm storing the results in a JArray variable.. then trying to reload the table...
this is the sample output screen
I've tried these
$("#tblTransactions").DataTable().draw();
$("#tblTransactions").DataTable().ajax.reload();
But it's not working for me. please Let me know if you got any idea ..thanks in advance..
#page
#model IndexModel
#{
Layout = "_Layout";
}
<script>
$(document).ready(function () {
$("#tblTransactions").DataTable();
});
function SubmitFilter()
{
var transactionNumb = $("#transactionNumber").val();
var cardHolderName = $("#cardHolder").val();
alert("SubmitFilter");
$.ajax({
type: "GET",
url: "https://localhost:7197/Transactions?transaction_number="+transactionNumb+"&cardholder="+cardHolderName,
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (data)
{
}
});
}
</script>
<a style="max-width: 100px;max-height: 40px;margin-left: 10px;" href="#" onclick="SubmitFilter();" class="btn btn-primary">SUBMIT</a>
<table id="tblTransactions" class="table table-bordered table-condensed table-striped table-hover">
<thead>
<th scope="col">Transaction No</th>
<td scope="col">Type</td>
<td scope="col">Status</td>
</thead>
<tbody>
#foreach (dynamic transaction in #Model.Transactions)
{
<tr>
<td>#transaction.transaction_number</td>
<td>#transaction.type</td>
<td>#transaction.status</td>
</tr>
}
</tbody>
</table>
I am populating a table via Ajax JSON with datatables, this is my JS code:
$(document).ready(function () {
$.ajax({
url: "../WebService.asmx/LoadUsers",
type: 'POST',
datatype: 'json',
//content: 'json', lo mismo que arriba
contentType: 'application/json; charset=utf-8',
success: function (data) {
var datos = JSON.parse(data.d);
// METODO JQUERY DATATABLES Documentación
$('#tblUsers').DataTable({
data: datos,
columns: [
{ 'data': 'id' },
{ 'data': 'username' },
{ 'data': 'password' },
{ 'data': 'dregistered' },
{
'data': null,
'defaultContent': "<img src='../assets/img/delete.png' id='btnDel' style='width: 22px; cursor:pointer;' />"
}
//
],
responsive: true
});
/*DataTables instantiation.*/
/*$("#tblUsers").DataTable();*/
},
error: function () {
alert('Fail!');
}
});
});
Html table:
<table id="tblUsers" class="table table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Usuario</th>
<th>Contraseña</th>
<th>Fecha</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Usuario</th>
<th>Contraseña</th>
<th>Fecha</th>
</tr>
</tfoot>
</table>
My table after loading html page
Is not showing data, it seems like not rendering at first, but after applying column filter or changing entries, the data is showing:
Filtering by entries number
Filtering by column order
Am I missing something? 🤔
Your problem is probably that you are trying to set 5 columns of data (even if the 5th one has data: null) but you have only 4 columns in your HTML <table>.
If you look at your console, probably there should be some error like Cannot read property 'style' of undefined or similar.
So, the loading of the data inside the table is interrupted by the error.
Change your HTML to this (adding an extra <th></th>) and it should go fine:
<table id="tblUsers" class="table table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Usuario</th>
<th>Contraseña</th>
<th>Fecha</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Usuario</th>
<th>Contraseña</th>
<th>Fecha</th>
<th></th>
</tr>
</tfoot>
</table>
I have a datatable it have a search box (date range filter) once i click the search button table body replace according to the filter(ajax).
my problem is i cant initialize table after ajax success.
HTML
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
Ajax
type: 'POST',
url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
data: "action=filterOc&" + url_data,
success: function (resultData) {
$('#occupancyBody').html(resultData);
$('#occupancy').dataTable();
}
});
sample screenshot
You can use below mentioned code to reinitialize table after ajax call.
While defining datatable, you can store in a variable.
var myTable = $('#occupancy').DataTable({ // all your configuration });
Now after ajax call you can call below line.
myTable.ajax.reload();
also remove this line in ajax:success function.
$('#occupancy').dataTable();
Let me know if it not works.
Please check here
$(document).ready(function(){
var table = $('#occupancy').dataTable();
$.ajax({
type: 'POST',
url: "../system/user/modules/controller.php",
data: "action=filterOc&",
success: function (resultData) {
$('#occupancyBody').html(resultData);
table.ajax.reload();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
The ajax.reload() API function should only work if you included the ajax option in Datatable's initialization (see here).
In this case, I'd recommend to add destroy:true to the initialization of Datatables, something like this:
$('#occupancy').DataTable({ destroy:true})
This would allow you to re-create the table every time the ajax call is successful.
hi i guess you selected wrong body id :
$('#occupancyBody').html(resultData);
but in your html :
<tbody id="dailyAct">
hope it's help,
I have a js file named admin.js which has knockout js functionality.
function AppViewModel() {
var self = this;
self.alldata = ko.observableArray();
self.viewAllInvoice = function() {
$.ajax({
type: 'POST',
url: BASEURL + 'index.php/main/learn_Ko/',
contentType: 'application/json; charset=utf-8'
})
.done(function(invoices) {
alert("hello");
self.alldata.removeAll();
$.each(invoices, function(index, invoice) {
self.alldata.push(invoice);
});
})
.fail(function(xhr, status, error) {
alert(status);
})
.always(function(data) {});
};
self.viewAllInvoice();
}
$(document).ready(function() {
ko.applyBindings(new AppViewModel(), document.getElementById('loanersclub_wrapper'));
});
I am trying to call the function in this page like this.
<script type="text/javascript" src="<?php echo base_url();?>js/admin.js" ></script>
<div style="margin-top:30px;" class="container" id="loanersclub_wrapper" class="wrapper">
<h1>HELLo</h1>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="text-center">1</th>
<th class="text-center">2</th>
</tr>
</thead>
<tbody data-bind="foreach: alldata">
<tr>
<td class="text-center"><span data-bind="text: $data.Loantime "></span></td>
<td class="text-center"><span data-bind="text: $data.Amount"></span></td>
</tr>
</tbody>
</table>
</div>
The thing is that, I am getting this data from a controller since I am using php, and I checked the controller does get the information as arrays, but the js file is not getting any thing, I even tried using alert, but seems like the function self.viewAllInvoice is not getting called at all.
You either need to set the value of BASEURL to the base url of your website, or use a relative path in your ajax call:
$.ajax({
type: 'POST',
url: '/index.php/main/learn_Ko/',
contentType: 'application/json; charset=utf-8'
})
I have a scroller in my page containing 10 static tables which I scroll using jquery-als anylistscroller. The problem is that my data source contains many objects so when I update the tables the only result I get is the last 10 elements from the data source. I tried using setTimeout function to delay the update of values but that didnt work and I could not add tables dynamically to the page.
here is example of the tables
<div id="lista2" class="als-container">
<div class="als-viewport">
<div class="als-wrapper">
<div class="als-item">
<table id="table" border="1">
<tr class="cla">
<th rowspan="2" id="01">
<img title="img1" id="img01" height="30" width="30" src="~/Images/orderedList0.png">
</th>
<th id="111">qte
</th>
<th id="112">var
</th>
</tr>
<tr>
<td id="121">prix
</td>
<td id="122">symb
</td>
</tr>
</table>
</div>
here where I update the values :
$.ajax({
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
url: '#Url.Action("getTickerObjects", "Home")',
success: function (ListTicker)
{
for (var i = 0; i < ListTicker.ListTicker.length; i++)
{
var obj = ListTicker.ListTicker[i];
Update(c, obj.QteE.toString(), obj.Trade_Price.toString(), obj.Price_Trade_Variation.toString(), obj.Mnemonic.toString().trim());
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
Is there a way I can slow down the updating process ?
You can try the defered attribute on an <script> tag that points to an external file. Try placing it before the closing </body> tag. Here' an article
<script src="script.js" defer="defer"></script>