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!
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,
I've created an web app that searches for online car ads and populates the page with a few tables after a post request.It looks like this:
After Search:
Every table element has a save button which should save those values to the database but my problem is that the page gets refreshed after submitting a post request. How can I do this without refreshing the page?
Table:
<form th:action="#{/saveAd}" method="POST">
<table class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th>Imagine</th>
<th>Titlu Anunt</th>
<!-- <th style="width: 16.66%">Link</th> -->
<th>Pret</th>
<th>Oras</th>
</tr>
</thead>
<tbody id="myTable">
<th:block th:each="element : ${lista}">
<trth:onclick="'javascript:rowClicked(\'' + ${element.url} + '\');'">
<td><img th:src="#{${element.img}}" class="size" /></td>
<td th:text="${element.title}"></td>
<td th:text="${element.pret}"></td>
<td th:text="${element.oras}"></td>
<td><input class="btn btn-danger" type="submit"value="Save"></td>
</tr>
</th:block>
</tbody>
Controller:
#RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(#ModelAttribute("adValue") AdValue adValue) {
System.out.println(adValue.getImg());
System.out.println(adValue.getLink());
System.out.println(adValue.getOras());
System.out.println(adValue.getPret());
System.out.println(adValue.getTitle());
return "home";
}
And also, how could I bind the list to a model object after pressing the save button?
I guess you may like this project. It is similar with what you need :
https://github.com/adinafometescu/tutorials/tree/master/spring-elasticsearch
You can use .bootstrapTable(). It a very method to update dynamically your table.
<table id="car-table" class="table table-striped">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="price">Price</th>
<th data-field="city">City</th>
<th data-width="10" data-formatter="saveButtonFormatter"/>
</tr>
</thead>
</table>
The beauty is that it will map the data-field to a java object.
js stuff:
function saveButtonFormatter(value, row, index){
var adId = row.id;
return "<button class=\"btn btn-danger \" data-title=\"Save\"
data-toggle=\"modal\" onclick=\"saveAd(\'"+adId+"\')\"
</button>"
}
The function saveAd(adId) will call the rest endpoint and will update the bootstrap table on success.
I see that in your thymeleaf you don't have inputs. I suggest to not post your entire object if you don't need user input, just the id.
// anotate the controller class with #RestController
#Autowired
AdService adService;
#PostMapping(path = "/ad/{id}")
public ResponseEntity<?> saveAd(#PathVariable("id") String id) {
adService.saveAd(id);
return new ResponseEntity<>(HttpStatus.ACCEPTED);
}
P.S : don't write code in Romanian :D
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.