Everything works as expected with multiple records, but if the search result returns a single row my datatable does not display it.
Any idea what might be causing this issue. Thank you.
↧
Datatable is not binding if the collection has just a single record.
↧
Is server-side processing feasible for small datasets?
Hello everyone,
I wanted to ask if there are any drawbacks to using Server-Side Processing for data rows that are less than 1,000? Would the DOM be faster in this scenario?
Note - I am using Server-Side Processing so that I can pull the data for the rows straight from the database using Ajax.
Thanks
↧
↧
Searching the value attribute on input tags
Hey all,
I recently discovered DataTables, and have been playing around with its incredible features.
I'm running into a bit of trouble with the search feature. I'm using DataTables in a JSP webapp, where I use expression language (EL) to pull and display information stored in the session.
Here is a sample of my code:
<table id="list" class="table table-hover results">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<c:forEach var="elt" items="${listCandidates}">
<tr>
<td>
<form action="ViewFullCandidateProfileServlet">
<a href="#">
<input type="hidden" name="candidateID" value="${elt.candidateID }">
<input type="submit" name="View Profile" value="${elt.firstName} ${elt.lastName}">
</a>
</form>
</td>
</tr>
</c:forEach>
</tbody>
</table>
The search fails to pick up data within the value attribute in the input tags. How can I direct it to look there?
Appreciate any pointers,
Cheers!
↧
How to display search results created *outside* DataTables?
My app calculates the results of a row search (more accurately, filter) outside of the DataTables instance because the results need to be available to multiple components.
The search results are always a subset of the original rows DataTables displayed.
What is the best way to get DataTables to display these results? Search plug-ins cannot be passed the results as a parameter and don't appear to have access to information beyond the DOM. (Search results are not available in the DOM.)
Currently, the app simply clear()'s all the rows in the DataTables instance and then re-add()'s the subset data as if I were creating a new table. Not ideal, and I'm worried about performance.
I love DataTables. Is there a better way?
↧
How to integrate charts with Datatables?
We are using Data Tables for one of our projects. We have a requirement to generate charts based on the data in data tables. We are planning to integrate with Morris.js (http://morrisjs.github.io/morris.js/) or jqPlot (http://www.jqplot.com/) to generate charts.
Also, there is a requirement to print and export the report to PDF or Excel. We are using the print and export option provided in the Data Tables for this purpose. We would like to know whether there is any possibility to get the generated charts printed and exported to PDF or Excel along with the tabular report.
Appreciate your help on this matter.
↧
↧
Datatables draw length menu
I want to draw the length menu out the table as I did it for the global search :
HTML
<input type="text" id="myInputTextField">
Javascript
$('#myInputTextField').keyup(function(){
myTable.search($(this).val()).draw() ;
})
It is possible to do that with the length menu ?
↧
get the corresponding table header for each td element
Hi all,
I am using javascript code to highlight a row from datatable and i printed the array values successfully ... But now i want to display the table header also with the td elements,,,
```
<
script>
function test(){
var iColumns = $('#<?php echo uniqid(); ?> thead th').length;
var dataArr = [];
$.each($("#<?php echo uniqid(); ?> tr.selected"),function(){
for (i=0;i<iColumns;i++)
{
dataArr.push($(this).find('td').eq(i).text());
a=dataArr[i];
}
});
//console.log(dataArr.join('\r\n'));
alert (dataArr.join('\r\n'));
}
</script>
This code dispalys the td elements only ... at the mean time i also need field name also... so anybody guide me....
Thanks.
↧
Export button to PDF/Excel etc and dropdown list
Hello,
I have a table and one of the columns has a dropdown list with a set of options:
<td>
<select name="customerType" id="customerTypeId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected="selected">Option 3</option>
</select>
</td>
When I use the export buttons I get the whole list of options for that particular column instead of only the selected option.
I initialize my table like this:
$('#table2').DataTable({
paging: false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
I want to export only the value that is selected. What can I do to fix this?
↧
RowReorder reverts row order after I try to swap rows
I'm using the plugin RowReorder here. However when I try to drag and drop one of the rows after I release my mouse the row goes back to where it was. I'm using DataTables 1.10.8. Here's some of the relevant code.
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="css/datatables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/rowReorder/rowReorder.dataTables.min.css">
<script src="js/rowReorder/dataTables.rowReorder.min.js"></script>
...........
var invoiceTable = jq('#filterTable').DataTable( {
"columnDefs": [
{ "targets" : [0], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [1], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [2], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [3], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [4], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [5], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [6], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [7], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [8], "visible": true, "searchable": true, "type": "html" },
{ "targets" : [9], "visible": true, "searchable": true },
{ "targets" : [10], "visible": true, "searchable": false, "sortable": false }
],
"columns": [
{"orderDataType": "dom-select"},
{"orderDataType": "dom-select"},
{"orderDataType": "dom-select"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-select"},
{"orderDataType": "dom-select"},
{"orderDataType": "dom-select"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-checkbox"},
{"orderDataType": "dom-checkbox"},
{"orderDataType": "dom-text-numeric"}
],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 50, // Set default of 50 rows
"bSort": false,
"rowReorder": {
dataSrc: 'order'
},
"dom": '<"header gradient-light-grey clearfix"lf>t<"footer gradient-light-grey clearfix"irp>',
"createdRow": function(row, data, index){ //adds the row's filterID as the ID of the tr element
jq(row).attr('id', data['filterID']);
jq(row).attr('order', index);
}
});
I tried setting rowReorder to just true as indicated in docs and then I tried what you see above where I used the dataSrc property. Neither worked. The table loads fine and all of the rest of the behaviour is working as expected but the reordering reverts back as soon as you release the mouse and I can't figure out why.
↧
↧
Stop row selection when expanding hidden columns
when we get the + sign to the left which will expand the columns we are not able to fit on the page, the row also gets selected
is there a way of suppressing this? we have additional functionality we fire off when a row is selected and we dont want this to happen when we expand
thanks
↧
How can we populate cascading dropdowns in the editor?
We have many scenarios where we need to populate cascading dropdown lists.
Example: Country -> State -> City).
We are implementing in .NET, how can we accomplish this?
↧
datatables without AJAX load only displayed page
Hi,
I want to use dataTables w/out AJAX.I do it.Unfortunately i have product groups with about 3000 records.The page loads about 5 seconds which is bad.My questions is - is there any way to load only the data for the selected page in order to not load slow.If we click on 4page, to reload the entire page with the content for 4.
↧
Can we add a row as total after the last row ??
I saw this link https://datatables.net/forums/discussion/20947/add-subtotal-row-for-each-column-within-a-group
where row grouping is done and totals are calculated ... but the output is shown in the grouped Row Header,
rather than a new row of total being added at the end and only for specific columns totals are shown..
Can anyone help achieve this.. please
↧
↧
Select row from object datasource (ajax)
Hi,
I will get a cell value from a selected row in of datasource, did someone have a jsfiddle or an example
It works for an html source but not for an ajax ds.
I don't have tbody tag in the html code
http://datatables.net/examples/server_side/object_data.html
Thanks,
Marc
↧
Cannot extend unknown button type: create
Anyone could help me with this error?
This is my code:
<script src="{% static "private/design_one/js/datatables_editor/jquery.dataTables.min.js" %}"></script>
<script src="{% static "private/design_one/js/datatables_editor/dataTables.buttons.min.js" %}"></script>
<script src="{% static "private/design_one/js/datatables_editor/dataTables.select.min.js" %}"></script>
<script src="{% static "private/design_one/js/datatables_editor/dataTables.editor.min.js" %}"></script>
<script>
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: '/api/staff',
table: '#phones',
fields: [
{ label: 'First name', name: 'first_name' },
{ label: 'Last name', name: 'last_name' },
// etc
]
} );
$('#phones').DataTable( {
dom: "Bfrtip",
processing: true,
serverSide: true,
ajax: "{{ api_url }}",
dataSrc: 'data',
columns: [
{ data: 'id' },
{ data: 'client.name' },
{ data: 'client.comercial_name' },
{ data: 'number' }
],
paging: true,
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
} );
</script>
↧
Pagination
English:
I would like to develop a paging where I would bring the total number of pages and when you click the page to bring the records of the clicked page?
Portuguese Brasil:
Como eu faria para desenvolver uma paginação aonde eu traria o total de páginas e quando clicar na página trazer os registros da página clicada ?
↧
Generating Table from Pure Javascript without using jQuery
I need to generate a HTML Table which receives data constantly from a Database. I receive the data as a Serialized JSON and I need parse the JSON to put it into a Tabular format and export into CSV or PDF. I have achieved this without the use of datatables but the User Experience is blown away. I have come across Datatables which seems to be a exceptional solution to retain User Experience however, I am having problem in finding the correct API for pure Javascript. Any suggestions or direction pointers?
↧
↧
New added row not showing correctly on asp.net mvc
I'm using asp.net MVC and sqlserver
I'm currently evaluating the editor prior to purchase. Its great apart from one problem which I just can't figure out.
I'm having exactly the same problem as
https://datatables.net/forums/discussion/28999/new-added-row-not-showing-instead-showing-first-record-twice and
https://datatables.net/forums/discussion/28886/creating-new-row-returns-wrong-row-by-using-sqlite-as-database
I went onto the generator to generate the code and downloaded the package, integrated it with my database and it worked perfectly,
I copied the code into my project but when adding a new row, it inserts it into the database fine but then the JSON returns the first row. The edit and delete work perfectly. Its just the create. I've stepped through the code and up until the editor process, the fields look exactly the same as the generator code apart from some authentication fields
↧
Datatable editor DateTime format conversion
I'm using formatters in my controller to set a date string format into DateTime sql data… the field is set as following in VB.net
.Field(New Field("OrdiniGiornaliero.RitiroDopo") _
.GetFormatter(Format.DateSqlToFormat("dd/MM/yyyy HH:mm")) _
.SetFormatter(Format.DateTime("dd/MM/yyyy HH:mm"))) _
when reading data everything is correct.. display data in the format I want… when update data an error occurred
The conversion of a nvarchar data type to a datetime data type resulted in an out-of-range value. The statement has been terminated
so cannot convert string date and time to a dataTime valid format for database….
if I set the formatter with
.SetFormatter(Format.DateFormatToSql("dd/MM/yyyy HH:mm"))) _
saves only date but not time…..
any idea?
↧
Internationalisation defaults via Ajax
I found a problem when I set the Internationalisation defaults using ajax, then when I try to initialize a table and set a specific translation for it, it doesn't overwrite the default, but if the default is set without ajax, it works.
This works: http://live.datatables.net/mixavivo/2/edit
This doesn't: http://live.datatables.net/foxixage/1/edit
Am I doing something wrong?
↧
