I have this two codes.
Why get i no filtering options with this code below?
I want the regular filtering for each column
$(function(){
oTable = $('#escapeTbale).DataTable().columnFilter({
"aoColumns": [
{
type: "text",
bRegex: true,
bSmart: true
},
{
type: "text",
bRegex: true,
bSmart: true
},
{
type: "text",
bRegex: true,
bSmart: true
}
],
"sDom": 'TC<"clear">lfrtip',
"bJQueryUI":true,
"sPaginationType": "full_numbers",
"processing": true,
});
my HTML Code:
</tbody>
<tfoot>
<tr>
<th>name</th>
<th>address</th>
<th>age</th>
</tr>
</tfoot>
many thanks ;-)
Please ensure that you have included 'columnFilter.js' in your html and need to follow table structure with thead and tbody as below to make datatable plugins working
<table id="escapeTbale">
<thead>
<tr>
<th>name</th>
<th>address</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
</tr>
</tbody>
</table>
Also check that function name dataTable starts with small d and not caps D. But may be this does not matter much
Related
I'm trying to check if I have a List with items. So I use this code in my HTML
<div class="form-group-petit row">
<div class="col-sm-12">
<table class="table center" id="tableSelectedEstudis">
<col style="width:80%">
<col style="width:20%">
<!--<col style="width:10%">-->
<thead>
<tr>
<th scope="col" data-th-text="#{edicio.estudis}"></th>
<th scope="col" data-th-text="#{edicio.estudis.vigent}">Vigent</th>
<!-- <th scope="col" data-th-text="#{label.accions}">Accions</th> -->
</tr>
</thead>
<tbody>
<tr th:each="estudi : *{listEstudis}" >
<td scope="row" th:text="${estudi.codiEstudi +' - '+ estudi.memo}"/>
<td scope="row" th:text="${estudi.vigentSN}"/>
<!-- <td>
<span class="link" th:attr="data-codiestudi =${estudi.codiEstudi}" id="eliminarEstudi" title="Elimina estudi" th:unless="*{altaOk} OR *{altaKo}"><i class="oi oi-delete"></i></span>
</td> -->
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<label class="error col-sm-10" th:if="${#fields.hasErrors('listEstudis')}" th:errors="*{listEstudis}"></label>
Normally I should add #NonEmpty label in the form and let Spring work automatically. In my case, I can't do it this way and I need to add the error manually. So I do this in my controller:
String[] codes = { "NotEmpty.admEdicionsDetallForm.listEstudis", "NotEmpty.listEstudis",
"NotEmpty.java.util.List", "NotEmpty" };
String objectName = "admEdicionsDetallForm";
Object[] objects = { new DefaultMessageSourceResolvable(
new String[] { "admEdicionsDetallForm.listEstudis", "listEstudis" }, null, "listEstudis") };
if (llistatEstudis.isEmpty()) {
bindingResult.addError(
new ObjectError(objectName, codes, objects, "És obligatori seleccionar almenys un estudi"));
}
But the message is not showing when I try to do it manually, howerver if I do it with the #NonEmpty lable it works.
The rejectValue() method is used to add a validation error to the BindingResult object. https://stackoverflow.com/a/65759773/2039546
So, in your code, instead of:
bindingResult
.addError(new ObjectError(objectName, codes,
objects, "És obligatori seleccionar almenys un estudi"));
Try with:
bindingResult.rejectValue("listEstudis", "error. listEstudis",
"És obligatori seleccionar almenys un estudi!");
I'm using angular 13 and bootstrap 3 and making an app which contains two components: form-component ( to input details about a user ) and list-component ( to display all the data in a table ). Inside my main app component html, I have a table template that calls my list component for values inside the table body:
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<app-contact-list
*ngFor="let itemElement of listData; let ind=index"
[item]="itemElement"
[i]="ind">
<button class="btn btn-primary" type="button">View</button>
<button class="btn btn-primary" type="button">Update</button>
<button class="btn btn-primary" type="reset" (click)="removeItem(itemElement)">Delete</button>
</app-contact-list>
</tbody>
</table>
inside my list component I wanted to loop these data to the table:
<tr>
<td><span>{{i}}</span></td>
<td><span>{{item.name}}</span></td>
<td><span>{{item.email}}</span></td>
<td><span>{{item.contact}}</span></td>
<td>
<ng-content></ng-content>
</td>
</tr>
But running the app displays all the data in one cell that looks like this:
https://i.stack.imgur.com/Mziwx.jpg
and adding another one gives me:
https://i.stack.imgur.com/Zu6M2.jpg
The table rows have detached from the table DOM element, causing them to render in one cell.
Instead of including the header and rows within the same component HTML, refactor them into respective components app-contact-header and app-contact-list.
The resulting HTML for <table> should include the above components wrapped within the <thead> and <tbody> elements as shown:
<table class="table table-bordered">
<thead>
<tr app-contact-header></tr>
</thead>
<tbody>
<tr
app-contact-list
*ngFor="let itemElement of listData; let ind = index"
[item]="itemElement"
[i]="ind"
></tr>
</tbody>
</table>
The components will need to be declared with an attribute selector (not to be confused with attribute directives), in order to be injected into the HTML element <tr>.
app-contact-header
HTML
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Action</th>
TS
import { Component, OnInit } from '#angular/core';
#Component({
selector: '[app-contact-header]',
templateUrl: './contact-header.component.html',
styleUrls: ['./contact-header.component.css'],
})
export class ContactHeaderComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
app-contact-list
HTML
<td class="col1">
<span>{{ i + 1 }}</span>
</td>
<td class="col2">
<span>{{ item.name }}</span>
</td>
<td class="col3">
<span>{{ item.email }}</span>
</td>
<td class="col4">
<span>{{ item.contact }}</span>
</td>
<td class="col5">
<button class="btn btn-primary" type="button">View</button>
<button class="btn btn-primary" type="button">Update</button>
<button class="btn btn-primary" type="reset" (click)="removeItem(item)">
Delete
</button>
</td>
TS
import { Component, Input, OnInit } from '#angular/core';
#Component({
selector: '[app-contact-list]',
templateUrl: './contact-list.component.html',
styleUrls: ['./contact-list.component.css'],
})
export class ContactListComponent implements OnInit {
#Input() item: any;
#Input() i: number;
constructor() {}
ngOnInit() {}
...
}
}
Using HTML <table> elements is not responsive. In future consider using <div> and <span> elements to render columns and rows.
I have a table of reviews
<table class="table">
<tbody>
<tr th:each="review : ${reviewsForMovie}">
<td th:utext="${review.text}"></td>
</tr>
</tbody>
</table>
But I dont want to show review if review.isApproved == false
How do i do that?
<table class="table">
<tbody>
<tr th:each="review : ${reviewsForMovie}">
<td th:hidden="${!review.isApproved}" th:utext="${review.text}"></td>
</tr>
</tbody>
</table>
Goal
After a POST request, I want to update a list. For example, if a user is added, so user list must be refresh.
So I do the post request, then I do a get request to update the content.
There is a way to do it without reload the page?
Thanks for your answer!
Ajax calls
function rafraichirContenu(url, type) {
$.ajax({
url: url,
type: type
}).done(function (response) {
$(document).html(response)
});
}
postRequest().done(function(response) {
rafraichirContenu('/emprunts/encours', 'GET');
...
});
Get Mapping
#GetMapping(value = "/encours")
public ModelAndView findAllEnCours() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("emprunts", empruntResource.getEmpruntsByStatutEquals(StatutEmprunt.EN_COURS));
modelAndView.setViewName("webapp/pages/emprunts");
return modelAndView;
}
HTML
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionEmprunts">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Usager</th>
<th scope="col">Exemplaire</th>
<th scope="col">Date de rendu</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
<th:block th:each="emprunt : ${emprunts}">
<tr>
<!--/*#thymesVar id="emprunt" type="bibliotheque.model.Emprunt"*/-->
<td th:text="${emprunt.getUsager().getMail()}"></td>
<td th:text="${emprunt.getExemplaire().getOeuvre().getTitre()}"></td>
<td th:text="${emprunt.getDaterendu()}"></td>
<td th:text="${emprunt.getStatut()}"></td>
</tr>
</th:block>
</tbody>
</table>
</div>
</div>
Console error
jquery.min.js:2 Uncaught TypeError: Cannot read property 'createDocumentFragment' of null
I am using the MessageConsole class to redirect System.out and System.err to a JTextPane named jMessageConsoleTextPane.
I am configuring it in my constructor like this:
jMessageConsoleTextPane.putClientProperty(JEditorPane.HONOR_DISPLAY_PROPERTIES, Boolean.TRUE);
MessageConsole mc = new MessageConsole(jMessageConsoleTextPane, true);
mc.redirectOut(null, null);
mc.redirectErr(Color.RED, null);
mc.setMessageLines(100);
and also in NetBeans I have it set to contentType text/html.
It prints everything fine with System.out and System.err but here comes my problem. I try to set the text of jMessageConsoleTextPane to an html table (which contains two other html tables) that I have created based on some variables, so I do:
String htmlTable = WordCounting.getHtmlTable(wordsArrays, hashtagsArrays);
jMessageConsoleTextPane.setText(htmlTable);
Here is how the htmlTable String can look like (taken straight from the debugger):
<html>
<body>
<table>
<tr>
<td>
<table border="1">
<th colspan="3">Words used most</th>
<tr>
<td>1</td>
<td>day</td>
<td>3720</td>
</tr>
<tr>
<td>2</td>
<td>good</td>
<td>3354</td>
</tr>
<tr>
<td>3</td>
<td>love</td>
<td>2689</td>
</tr>
<tr>
<td>4</td>
<td>time</td>
<td>2372</td>
</tr>
<tr>
<td>5</td>
<td>got</td>
<td>1897</td>
</tr>
<tr>
<td>6</td>
<td>lot</td>
<td>1831</td>
</tr>
<tr>
<td>7</td>
<td>know</td>
<td>1801</td>
</tr>
<tr>
<td>8</td>
<td>photo</td>
<td>1772</td>
</tr>
<tr>
<td>9</td>
<td>girl</td>
<td>1755</td>
</tr>
<tr>
<td>10</td>
<td>life</td>
<td>1754</td>
</tr>
</table>
</td>
<td>
<table border="1">
<th colspan="3">Hashtags used most</th>
<tr>
<td>1</td>
<td>win</td>
<td>136</td>
</tr>
<tr>
<td>2</td>
<td>panjaforpunjab</td>
<td>105</td>
</tr>
<tr>
<td>3</td>
<td>aaronto600k</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td>rt</td>
<td>89</td>
</tr>
<tr>
<td>5</td>
<td>giveaway</td>
<td>85</td>
</tr>
<tr>
<td>6</td>
<td>cfc</td>
<td>70</td>
</tr>
<tr>
<td>7</td>
<td>whybeinarelationshipwhen</td>
<td>65</td>
</tr>
<tr>
<td>8</td>
<td>retweet</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>gameinsight</td>
<td>64</td>
</tr>
<tr>
<td>10</td>
<td>rhoareunion</td>
<td>57</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Here is how it looks in the jMessageConsoleTextPane:
Then I try to use System.out which should print bellow text:
[23:19:32] Getting driver...
[23:19:32] Connecting to database...
[23:19:32] Executing query...
5.6.16
and this happens:
Basically everything is getting added on the last cell of the second table. Even if I do jMessageConsoleTextPane.setText("") there is a sole table cell remaining like this (top left):
So what is going on? Why is there a cell left and how do I fix it?
The MessageConsole class was not designed to be using with HTML. All the class does is add the text to the end of the Document, which in your case appears to be the last cell of the table.
You can try adding an empty HTML tag to the Document when you first create the HTML. Then maybe the text will be added to this tag instead of the table cell.
Maybe something like:
</table>
<p></p>
</body>
This all depends on how the Document parses the text that is inserted into the Document.