Hi I'm trying to implement a Datatable to a webpage that is rendered using Perl and Template Toolkit.
I'm receiving a pop-up error from the data table when it is rendered
This is the error:
DataTables warning: table id=datatable_tabletools - Requested unknown
parameter '1' for row 1. For more information about this error, please see
http://datatables.net/tn/4
I've read the documentation on this error but I'm still unsure as to why I'm receiving it
Here is the code I believe it is related to.
<table iq-datatable id="datatable_tabletools" class="table table-striped table-bordered table-hover render_me_as_datatable" width="100%">
<thead>
<tr role="row">
<th class="sorting_asc">ID</th>
<th class="sorting">thing</th>
<th class="sorting">otherthing</th>
<th class="sorting">anotherthing</th>
<th class="sorting">morething</th>
<th class="sorting">something</th>
<th class="sorting"></th>
</tr>
</thead>
<tbody>
[% FOREACH item IN list%]
<tr role="row" class="odd [% item.var%]"
[% IF item.var== "CLOSED" %]
style="background-color: lightgreen;"
[% ELSE %]
style="background-color: lightyellow;"
[% END %]>
<td class="sorting_1">[% item.var%]</td>
<td>[% item.var1%]</td>
<td>[% item.var2%]</td>
<td>[% item.var3 FILTER currency %]</td>
<td>[% item.var4%]</td>
<td>[% item.var5%]</td>
<td> <i class="fa fa-edit"></i> View </td>
</tr>
The documentation provided in the error, explains it very well.https://datatables.net/manual/tech-notes/4
Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be
DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`
where:
{id} is replaced with the DOM id of the table that has triggered the error
{parameter} is the name of the data parameter DataTables is requesting
{row-index} is the DataTables internal row index (row().index()API) for the row that has triggered the error.
{column-index} is the column data index (column().index()API) for the column that has triggered the error. The column index information was added in DataTables 1.10.10.
So to break it down, DataTables has requested data for a given row, of the {parameter} provided and there is no data there, or it is null or undefined (DataTables doesn't know, by default how to display these parameters - see below if your data does contain these values).
id in your case being datatable_tabletools
parameter in your case being 1
row-index in your case being row 1
Finally, to give you a short answer, column 1 row 1 in datatable_tabletools does not contain the data it is expecting, it is either null or empty or incorrect format.
So have a look at what the code is requesting and see what is not in the table.
Related
i managed to retrieve non-null json data from backend and i want to display this in table form, can anyone help me, how to display json data like below into table in angular?
{"2020-12-17":
{"tanggal": "2020-12-17", "kurs_jual": "10781.030615606935", "kurs_beli": "10673.605766653045"},
"2020-12-18":
{"tanggal": "2020-12-18", "kurs_jual": "10790.980751228397", "kurs_beli": "10682.253685484742"}
}
this is the html code to display the json data in the table
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Sell</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<tr *ngFor="forecast_table let data">
<td>{{data['tanggal'].tanggal}}</td>
<td>{{data['tanggal'].kurs_jual}}</td>
<td>{{data['tanggal'].kurs_beli}}</td>
</tr>
</tbody>
</table>
If you have the data in JSON format you could parse the data first. This will parse the json to a js Object.
const obj = JSON.parse(jsonData);
Then you could extract the entries that you want to display in your table.
const rows = Object.values(obj);
Finally use the variable rows to iterate in your table.
<tr *ngFor="let data of rows">
<td>{{data.tanggal}}</td>
<td>{{data.kurs_jual}}</td>
<td>{{data.kurs_beli}}</td>
</tr>
Note that if you got the json response with HTTPClient and the responseType is json, you dont need to do the parsing. The response will be already parsed and you could use it directly as a js Object.
This question already has an answer here:
How do I pass current item to Java method by clicking a hyperlink or button in JSP page?
(1 answer)
Closed 2 years ago.
I have a problem mixing JSP Servlet and c:forEach form...
The problem is that whatever my id is, the HTML form will always send the first in the list, refered to ' name="id" '.
Is there a solution maybe to get several name="id1", name="id2" ...etc in order to get the good one ?
Here is the code.
<div id="client-table">
<form action="gestion-commandes" method="POST">
<table class="table table-striped">
<thead class="thead-custom">
<tr>
<th scope="col">#</th>
<th scope="col">NOM</th>
<th scope="col">PRENOM</th>
<th scope="col">EMAIL</th>
<th scope="col">TEL</th>
<th scope="col">COMMANDES</th>
</tr>
</thead>
<tbody class="tbody-custom">
<c:forEach items="${clients}" var="client">
<tr>
<th scope="col">${client.id}<input name="id" value="${client.id}" hidden = "true"></th>
<th scope="col">${client.nom}</th>
<th scope="col">${client.prenom}</th>
<th scope="col">${client.email}</th>
<th scope="col">${client.tel}</th>
<th scope="col"><button type="submit">Commandes</button>
</th>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</div>
</div>
Thank you in advance,
Joss
When the parameter has multiple values, using request.getParameter("id") will return only the first parameter value.
You can get all values using request.getParameterValues instead of request.getParameter, for example:
String[] ids = request.getParameterValues("id");
But, if you only want to get one value, corresponding to the row you clicked, you can't use a hidden input, because all hidden inputs will be send with the submit.
The most straight forward way to get only the selected id is to pass it as a value of the button. Only the clicked button will be send with the submit.
<button type="submit" name="selected" value="${client.id}">Commandes</button>
And getting it on your servlet with:
String selectedId = request.getParametre("selected");
You will find more details on this answer of question marked as duplicate.
Simple question really, but how can I setup the typeahead to work in a table that works off of a different table than my typeahead?
For Example, I have a foreign key in a table and I want to let the users select this key based on the respective NAME value in the foreign key's primary table.
Code Example:
<table class="table table-bordered table-hover table-striped rwd-table" id="page-wrap">
<thead>
<tr>
<th>Primary ID</th>
<th>Foreign Key (As Name)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in PrimaryTable" id="display">
<td data-th="ID">{{p.PrimaryID}}</td>
<td>
<input id="ForeignKeyName"
type="text"
ng-model="p.ForeignKeyID"
uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"
class="form-control">
</td>
</tr>
</tbody>
With this example, I would want the users to see the "Foreign Key (As Name)" As the Name value instead of the ID value. The trick is that I also want the underlying value to be the ID and have it mapped to match the original value, as notified by the ng-model.
UPDATE: Another question I had that was in line with the previous one is how do I setup my ng-model to show the ForeignKeyTable.ForeignKeyName in place of the PrimaryTable.ForeignKeyID?
This would be similar ( I imagine) to how the uib-typeahead matches the ForeignKeyTable.ForeignKeyID and ForeignKeyTable.ForeignKeyName but with the two seperate tables?
What I would desire is to be able to put ng-model: PrimaryTable.ForeignKeyID as ForeignKeyTable.ForeignKeyName
First thing would be updating PrimaryKeyTable rows every time user selects value in typeahead. You'll have to catch selected item and manually assign its ForeignKeyId value to the row of PrimaryTable.
The way to do it is to add typeahead-on-select directive to your typeahead and bind it to the function that assigns the values for you.
It would look like this:
HTML
<tr ng-repeat="p in PrimaryTable" id="display">
<td data-th="ID">{{p.PrimaryID}}</td>
<td>
<input id="ForeignKeyName"
type="text"
ng-model="selectedItem" <!-- could be anything really for we will not use it here -->
uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"
typeahead-on-select="onSelect($item, $model, $label, p)"
class="form-control">
</td>
</tr>
Inside your controller
$scope.onSelect = function($item, $model, $label, primaryKeyTableRow) {
primaryKeyTableRow.ForeignKeyId = $item.ForeignKeyId;
}
Next step is to display name property value of ForeignKeyTable row that corresponds to ForeignKeyId from PrimaryKeyTable in each row. Since we have to filter ForeignKeyTable to find suitable item it would be a good idea to put that logic inside the controller. For there are multiple rows in which we want to display corresponding name, we'll have to filter the ForeignKeyTable for each row separately. This is where ng-controller for ng-repeat comes in handy. What we'll do is bind new controller for each table row generated by ng-repeat and put some logic inside that controller. In HTML it would look like this:
<tr ng-repeat="p in primaryKeyTable" ng-controller="itemController">
<!-- ... -->
</tr>
And we'll have to define new controller in JS file:
app.controller('itemController', function() {
// ...
});
Now we can have separate logic for each row in the table. So that's a place to filter ForeignKeyTable to find corresponding item and display it's name.
Since whole code is kind of big I've put it in the plunker:
http://plnkr.co/edit/xccgnpxoPHg6vhXWPwZn?p=preview
See what you can do with it.
I have an ASP page which displays rows of data in an HTML table, after a query to an SQL database. The number of returned rows can vary. I want to add a function so that when i click on a button, I fire off a query to the SQL server database to update a column in that particular row. To do that i will use the primary key from my result set.
The part I am having difficulty with is getting the proper rows ID. What I have wrote so far returns the same ID every time regardless of which row i click on. Sample code below.
<table>
<tr>
<td class="bold" colspan="9"><%=vHeading%></td>
</tr>
<tr>
<td class="tablehead">Id</td>
<td class="tablehead">WhenPosted</td>
<td class="tablehead">WhenCreated</td>
<td class="tablehead">WhenUpdated</td>
<td class="tablehead">Source</td>
<td></td>
</tr>
<%
DO WHILE NOT stRs.eof
i = i + 1
%>
<tr>
<td id="pId<%=i%>" class="tablecell"><%=stRs.fields("Id")%></td>
<td class="tablecell"><%=stRs.fields("WhenPosted")%></td>
<td class="tablecell"><%=stRs.fields("WhenCreated")%></td>
<td class="tablecell"><%=stRs.fields("WhenUpdated")%></td>
<td class="tablecell"><%=stRs.fields("Source")%></td>
<td id=<%=i%>><input type="button" value="Post" onclick="post();" /></td>
</tr>
<%
stRs.MoveNext
LOOP
%>
</table>
<script text="text/javascript">
function post() {
var pId = document.getElementById("pId").innerHTML;
alert(pId);
}
</script>
So i loop through my result set creating rows. For examples-sake, row one will contain ID 1. Row 2 will have ID 2 etc.
If I click on my button which fires off the post method, the alert shows ID 1 every time, no matter the row i click on. I guessed its because i was originally assigning the same ID to the column for each row. I now use a counter variable and assign it to the ID which is creating unique ID's for the columns now, but I'm not sure how to call the function and use the correct ID. Any pointers are much appreciated!
You have to pass I to the function:
<input type="button" value="Post" onclick="post(<%=i%>);" />
then
<script text="text/javascript">
function post(i) {
var pId = document.getElementById("pId"+i).innerHTML;
alert(pId);
}
</script>
I have a database in SQL which I have connected to successfully and I am displaying it on my web page. There are a lot of null fields in the database, so when I display the information in a table in the browser you see a lot of empty fields. I have tried using the empty-cell function but this doesn't seem to work. So I'd like to just have the word "NULL" in the empty fields.
I have asked this question already but it got closed as my question was a bit to vague. Please see my table code below:
<div id="displayBox" style="border: 3px solid #9C9595; height: 750; width: 1000px" class="blackBox">
<h2> View Sim Details </h2>
<table class="myTable" border="5">
<tr>
<th id="">ID</th>
<th id="">Number</th>
<th id="">Sim Card</th>
<th id="">ACCOLC</th>
<th id="">Notes</th>
<th id="">Next Upgrade</th>
<th id="">Pin</th>
<th id="">Puk</th>
<th id="">End Date</th>
<th id="">Update</th>
</tr>
</div>
With ASP classic, you could simply do something like this:
<td><%=StringIfNull(rs("SomeValue"))%></td>
function StringIfNull(value)
StringIfNull = value
if isnull(StringIfNull) then
StringIfNull = "Null"
end if
end function
Or you could handle this at the DB level:
SELECT ISNULL(SomeValue, 'Null') AS SomeValue FROM MyTable