I'm working on a project using codeigniter. I'm trying to use datatables to view data fetched by ajax. the network tab shows that the ajax returned values correctly but the function is marked as 404 and I get this error
"DataTables warning: table id=data - Ajax error. For more information about this error, please see http://datatables.net/tn/7"
Here's the ajax in the network tab
I checked the response and it's correct. I've opened the ajax function like this: domain.com/module/controller/merchantsTable and I got correct data
{ "merchantsdata":[{"id":"6","email":"user#mail.com"},{"id":"7","email":"user2#mail.com"}]}
datatables code [updated: added 'processing' and 'serverSide']
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
//base_url refers to https://www.domain.com/
$(function () {
$('#data').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?=base_url()?>merchants/admin_merchants/merchantsTable",
"columns": [
{ "merchantsdata": "id" },
{ "merchantsdata": "email"}
],
"order":[0 , 'desc'],
"lengthMenu": [[20, 50, -1], [20, 50, "All"]]
} );
});
So how to fix this issue and make it work?
change to
<table id="data">
<thead>
<tr>
<th>id</th>
<th>email</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>email</th>
</tr>
</tfoot>
</table>
Worked without modifying the code. My mistake, there was another folder in the root named 'merchants' so ajax didn't fetch data from the codeigniter route path (merchants module) but from the folder in the root which is wrong so I renamed the folder in the root and it worked.
Related
Using bootstrap table; the code below returns an empty getElementById for topic_name value, but if I move the 'input' outside of the thead it works. What is happening and how do I get this to work within thead?
<table id="table" class="table table-striped">
<thead>
<tr>
<th data-field="topic">
<input type="text" name="topic_name" id="topic_name">
<a onclick="topicButton()" href="##">this</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some info here...</td>
</tr>
</tbody>
</table>
<script>
function topicButton()
{
var getThis=document.getElementById("topic_name").value;
alert(getThis);
}
</script>
Tested 2 examples and removed some bootstrap table parameters, removing one parameter worked in 1 example and removing another worked in the other.
For the code I submitted above (after I added all the additional bootstrap table parameters that my original code included - see list below), I removed data-toggle="table" and it worked. In my original code i remove data-show-columns="true" and it worked... odd.
Here is a list of the parameters I had attached to bootstrap table:
<table id="table" class="table table-striped table-borderless"
data-toolbar="#toolbar"
data-toggle="table"
data-cookie="true"
data-cookie-id-table="topic_id"
data-pagination="true"
data-search="true"
data-sort-name="topic_id"
data-sort-order="desc"
data-unique-id="topic_id"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-search-button="true"
data-page-size="5"
data-page-list="[5, 10, 25, 50, 100, all]"
data-select-item-name="selectItemName"
data-show-export="true">
I'm adding dataTable to my coldFusion project, but it is returning: Uncaught TypeError: f is undefined
Code:
<table id="webPosttable" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>DATE</th>
<th>CK</th>
<th>NAME</th>
<th>IN</th>
<th>RATE</th>
<th>COST</th>
</tr>
</thead>
<tbody>
<cfoutput query="myQuery">
<cfset totalreportin = totalreportin + val(counter)>
<cfset totalreportcost = rate*counter + totalreportcost>
<tr>
<TD>#inserteddate#</TD>
<TD>#ck#</TD>
<TD>#fullname#</td>
<TD>#counter#</TD>
<td>#decimalformat(rate)#</td>
<td>#dollarformat(rate*counter)#</td>
</tr>
</cfoutput>
</tbody>
<tfoot>
<cfoutput>
<tr>
<TD colspan="3">TOTAL:</TD><td>#totalreportin#</td><TD></td><td>#dollarformat(totalreportcost)#</td>
<TD colspan="3">AVERAGE:</TD><td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td></td><td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
</table>
<script>
$('#webPosttable').DataTable({
"lengthChange": false,
"paging": false,
"bInfo" : false,
"dom": '<"pull-left"f><"pull-right"l>tip'
});
</script>
Does anyone know what if something is missing in my table structure or javascript datable settings?
Thanks
The problem won't be in your Coldfusion code, it will be the structure of your <tfoot> content. The number of columns in the tfoot doesn't match the number of columns in the rest of your table. Even the two trs within your tfoot don't match each other.
Comment out the tfoot temporarily to test whether it works without, then balance up the columns and put it back in.
eg:
<tfoot>
<cfoutput>
<tr>
<TD>TOTAL:</TD>
<td>#totalreportin#</td>
<td></td>
<td>#dollarformat(totalreportcost)#</td>
<TD>AVERAGE:</TD>
<td><Cfif incomingreport.recordcount GT 0>#decimalformat(val(totalreportin/incomingreport.recordcount))#<Cfelse>0</CFIF></td>
</tr>
<tr>
<td colspan="5"></td>
<td><Cfif totalreportin GT 0>#dollarformat(totalreportcost/totalreportin)#<cfelse>0</cfif></td>
</tr>
</cfoutput>
</tfoot>
If you still have errors after that then I'd advise updating the question to include the code showing which version of jQuery+datatables you're including and where and how you're including it. You may also need to wrap your script in a $(document).ready( function () { ...
I am having a little trouble with this one.
Using the approach discussed in this -- https://jasonwatmore.com/post/2019/06/18/angular-8-simple-pagination-example
Use-case difference is, my data all comes from database. So I have had to use a model class and all. But, due to some problem, I am getting the same data [1st row from db] in all the rows. Let me post the code I used --
ANGULAR
method inside my component to get data from service class
newsTopics: NewsTopic[];
pageOfItems: Array<NewsTopic>;
getAllNewsTopics() {
this.userService.getAllTopics()
.subscribe((data: NewsTopic[]) => {
this.newsTopics = (data as NewsTopic[]).map((x, i) => ({ Id: (i + 1), TopicId: data[0].TopicId, TopicName: data[0].TopicName, TopicInfo: data[0].TopicInfo, IssueStartDate: data[0].IssueStartDate, IssueCloseDate: data[0].IssueCloseDate, NewsCategory_Id: 0 }));
})
}
my model class
export class NewsTopic
{
Id: number;
TopicId: string;
TopicName: string;
TopicInfo: string;
IssueStartDate: Date;
IssueCloseDate: Date;
NewsCategory_Id: number;
}
the method in service class itself
getAllTopics(){
var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
return this.http.get<NewsTopic[]>(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader });
}
my html for showing the data and the pagination control
<div class="card-body">
<table class="table table-striped" id="newstopics_tbl">
<thead>
<tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)">
<th>Topic ID</th>
<th>Topic Name</th>
<th>Topic Info</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nt of pageOfItems">
<td><b>{{nt.TopicId}}</b></td>
<td>{{nt.TopicName}}</td>
<td>{{nt.TopicInfo}}</td>
<td>{{nt.IssueStartDate}}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px">
<jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"></jw-pagination>
</div>
My guess is, the problem lies in the getAllNewsTopics() method, where I am trying to fill and map the array of objects and assign to the variable. Something wrong there. If you see the original example from the link, they used a .fill(0) also. In my case I tried doing .fill(data[0]) however result is the same, ie. only first record, repeated multiple times.
What is the trick I am missing? Can someone just point me out.
Much needed, Thanks,
EDITS --
These are the changes->
getAllNewsTopics() {
var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
return this.http.get<NewsTopic[]>(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader })
.subscribe((data: NewsTopic[]) => {
this.newsTopics = data;
});
}
and
<div class="card-body">
<table class="table table-striped" id="newstopics_tbl">
<thead>
<tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)">
<th>Topic ID</th>
<th>Topic Name</th>
<th>Topic Info</th>
<th>Start Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nt of pageOfItems" style="cursor:pointer" (click)="NewsArticleAdd(nt)">
<td (click)=""><b>{{nt.TopicId}}</b></td>
<td style="color:mediumvioletred;" (click)="">{{nt.TopicName}}</td>
<td (click)="">{{nt.TopicInfo}}</td>
<td (click)="">{{nt.IssueStartDate}}</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px">
<jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"></jw-pagination>
</div>
That does the trick. Works as expected,
In my laravel 5.7/ blade / jQuery v3.3.1 / Bootstrap v4.1.2 app
I use "yajra/laravel-datatables-oracle": "~8.0" library
and when I need to change class of some rows depending on value of some field I do :
return Datatables
::of($votesCollection)
->setRowClass(function ($vote) {
return $vote->status == 'N' ? ' row_new_status' : ($vote->status == 'I' ? 'row_inactive_status' : '');
})
It works ok, but I did not find any similar methods for columns. Are there ? Can it be implemented in some way ?
UPDATED # 1:
In my blade file I define header of the table :
<div class="table-responsive">
<table class="table table-bordered table-striped text-primary" id="get-warehouse-dt-listing-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Location</th>
<th>Level count</th>
<th>Created At</th>
<th>Updated At</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
but not generated rows.
Or can I define it in blade? Please example, if yes.
Thanks!
I want to load the table dynamically as soon as the page loads.i have tried the following code , but it is not showing 2nd column values found out in javascript.plz help me out.
<html>
<head>
<script type="text\javascript">
var brw=navigator.appCodeName;
var bw=navigator.appName;
var vrs=navigator.appVersion;
var plt=navigator.platform;
document.getElementById('r1').innerHTML = ' '+brw;
document.getElementById('r2').innerHTML = ' '+bw;
document.getElementById('r3').innerHTML = ' '+vrs;
document.getElementById('r4').innerHTML = ' '+plt;
</script>
</head>
<body>
<table border='1'>
<tr><td>Browser code </td><td><div id='r1'></div></td></tr>
<tr><td>Browser </td><td><div id='r2'></div></td></tr>
<tr><td>Browser Version </td><td><div id='r3'></div></td></tr>
<tr><td>Platform </td><td><div id='r4'></div></td></tr>
</table>
</body>
</html>
Your table should be like :
<table>
<thead>
<tr>
<th>Browser code</th>
<th>Browser</th>
<th>Browser version</th>
<th>Platform</th>
</tr>
</thead>
<tbody>
<tr>
<td><div id='r1'></div></td>
<td><div id='r2'></div></td>
<td><div id='r3'></div></td>
<td><div id='r4'></div></td>
</tr>
</tbody>
</table>
This way your table heads are set at top in <thead> balise, then you can add rows in <tbody> balise.
Just put your Javascript code at the end of your page.