Datatable sScroll is creating duplicate datatables - javascript

I am facing issue in Datatable sScroll Property.
I have defined the datatable in my html file like below
<table id="datatable" class="vrptTable">
<thead>
<tr>
<th> column1</th>
<th>Column 2</th>
</tr>
</thead>
</table>
and I am populating this datatable in my js file as below :
var options = new DataTableOptions($table, {
"sAjaxSource" : ajaxSource,
"sAjaxDataProp" : "aaData",
"sScrollY":"200px"
}).getOptions();
$("#table").dataTable(options)
;
The problem is it's creating the vertical scroll bar but i can see 2 tables in HTML DOM. First one contains only header information and second datatable contains empty header and my data.
Can anyone please help.

This is absolutely normal behavior of jQuery DataTables. See this official example, there are two tables - one for the header, another one for the body.

Related

Trying to get the json variable where bootstrap tables save data

Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?

Tablesorter - filter-select and filter_saveFilters

I have a table with filters rendered as select boxes and the option that the filter is saved between page reloads. Works so far. Here is the relevant part of my code:
<script>
$('.tablesorter').tablesorter({
widgets: ["saveSort", "filter", "zebra"],
widgetOptions: {
filter_saveFilters : true,
saveSort: true
}
});
</script>
<table class="table tablesorter" data-sortlist="[[1,0]]">
<thead>
<tr>
<th data-filter="false" data-sort="false">Image</th>
<th>Name</th>
<th class="filter-select">Status</th>
</tr>
</thead>
<tbody> ... </tbody>
</table>
Here comes the problem: First page load - filter status for "error" (select-box) results in one table row displayed. Then I fix the error and reload the page. Now all rows are filtered out, but the status filter select-box is empty (does not contain the active filter "error", thus displays an empty string).
That means that the displayed filter and the displayed table rows do not match, which is a problem.
When I activly select the empty value in the status filter, all rows get displayed again.
Any ideas how to handle this issue? Thanks for your solutions :)

Export table to excel and columns to be in text format

I am using bootstrap-table to show tables in my page and I use TableExport.js , FileSaver.js and .xlsx.core.min.js libraries in order to save the table in .xlslx format.
The problem is that the below column in excel is shown in general format, causing the values to be displayed like 1,00582E+11, while the right value is 100582012421.
I tried data-tableexport-msonumberformat="\#" to force export process to treat this column as a text, but the result didn't change. I also read this similar question and I create a CSS class
.text{
mso-number-format:"\#";/*force text*/
}
but neither this solution worked for me..
<table id="mytable" class="table table-hover"
...
data-url="myfile.json"
...
>
<thead>
<tr>
...
<th data-field="productId" data-tableexport-msonumberformat="\#">Product</th>
...
</tr>
</thead>
</table>
Use into td the class tableexport-string
<td class="tableexport-string">{{$Rep->deviceName}}</td>

DataTables: TypeError: i is undefined

I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.

How does data-sort-name in Bootstrap table Js work?

I am using folowing library : http://bootstrap-table.wenzhixin.net.cn/documentation/
I load json objects into this table which works fine, but now here comes the problem. I want to be able to sort columns.
My Json layout as folows :
[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]
<table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
<thead>
<tr>
<th data-field="Name">Name</th>
<th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
</tr>
</thead>
</table>
I want to show TotalFormatted data, but i want to sort this column with Total property, since TotalFormatted cant be used for that. In the documentation i saw the following :
data-sort-name : Provide a customizable sort-name, not the default
sort-name in the header, or the field name of the column. For example,
a column might display the value of fieldName of "html" such as
"abc", but a fieldName to sort
is "content" with the value of "abc".
but how ever data is not sorted correctly, has anyone exprienced this or have i misunderstood something?
Actually data-sort-name doesn't work that way. the main intention of data-sort-name option is to control the default sorting of the table data.
for the data-sort-name option to work with default sorting it needs to point to one of the data-field attribute of the column in the table.
note : In short data-field is like a an id added to each column, which the data-sort-name option refers to sort the table on load.
To understand this better, here is an example with code from Bootstrap site
try changing the data-sort-name to one of the columns data-field value and execute the code, you will understand what I just explained above.
HTML Code:
<table data-toggle="table"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-sort-name="stargazers_count"
data-sort-order="desc">
<thead>
<tr>
<th data-field="name"
data-sortable="true">
Name
</th>
<th data-field="stargazers_count"
data-sortable="true">
Stars
</th>
<th data-field="forks_count"
data-sortable="true">
Forks
</th>
<th data-field="description"
data-sortable="true">
Description
</th>
</tr>
</thead>
Live demo # JSFIDDLE: http://jsfiddle.net/dreamweiver/ptxj8Lao/

Categories