I've used DataTables.net tables in a few other places but in this particular table I have an unknown set of columns at design time. Even so, I can't spot what is different about this implementation as far as the DataTables.net table is concerned.
The table itself works as expected, until I hit print (or excel) at which point I receive the last row repeated for the row count.
I have made a Fiddle demonstrating the issue: https://jsfiddle.net/vod2x3vk/4/
Thank you,
Michael
Need to implement parent child
basicllyI have List (table) and is link to a list library (table) best way to do this?
Thanks
I have followed https://datatables.net/development/sorting on how to create a custom sorting function, but it doesn't work. Here is my code:
$('#dataTables-example').DataTable({
responsive: true,
columnDefs: [
{searchable: false, targets: 0},
],
"columnDefs": [
{ "sType": "string", "aTargets": [ 1 ] }
],
"language": {
"search": "Vyhledávání:",
"lengthMenu": "Zobrazit _MENU_ záznamů na stránku",
"zeroRecords": "Žádné vyhovující záznamy",
"info": "Zobrazena strana _PAGE_ z _PAGES_ (celkem _TOTAL_ pacientů)",
"infoEmpty": "Žádné dostupné záznamy",
"infoFiltered": "(celkem nalezeno z _MAX_ celkových záznamů)",
"paginate": {
"previous": "Předchozí",
"next": "Následující"
}
}
});
//TEST: use locale sorting
console.log("TEST 6");
jQuery.fn.dataTableExt.oSort['string-asc'] = function(x,y) {
console.log("TEST");
return x.toString().localeCompare(y.toString());
};
jQuery.fn.dataTableExt.oSort['string-desc'] = function(x,y) {
console.log("TEST2");
return y.toString().localeCompare(x.toString());
};
However, I only see "TEST 6" in console, and not "TEST" nor "TEST2", even if I'm spamming the sort button on all columns. What am I doing wrong? Also, what is the difference between "columnDefs" and "columnDefs"?
I have SQL Server 2005. When I opened .mdf file some days ago it looked like invalid. I launched sql server management studio for diagnostics, but it was useless. Any suggestions for recovery mdf...
Hello,
I have a problem only under Chrome (Version 55.0.2883.87 m).
It works well with Firefox (50.1.0)
Issue :
The loading is good. But the window (div) growths when I enter some letters in "Search" field . So my window is out of shape after.
// Init DataTable with label
$(document).ready(function() {
var table = $('#list_did').DataTable( {
ajax: '../config/manage_did/manage_lst_acc.inc',
scrollY: '30vh',
scrollX: 'false',
"autoWidth": false,
......etc...
Did you have a idea for this behavior under Chrome only ?
Thanks you
Laurent
rendring hyperlink not working help.
I have my report site setup with Scrollx: true. I also have a Dev site that is using server side processing as well as the Scrollx: true.
Since the Prod site is not using server side processing yet when the data for a <td> over flows there is a scroll bar added so that you can see it all and it doesn't overflow onto the rest of the <td>'s to the right of it.
With the Dev site, which is using server side processing the scroll bar does not show up. When there is too much data for the <td> it overflows into the <td>'s to the right.
How can I fix this so that even with server side processing I have the scrolling?
Prod
$(document).ready(function() {
$('#DataTable').DataTable(
{
"lengthMenu": [[25,50,75,100,150],[25,50,75,100,150]],
"ScrollX": true,
"dom": '<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
"fixedHeader": { header: true, footer: false }
});
});
Dev
$(document).ready(function ()
{
$('#DataTable').DataTable(
{
"lengthMenu": [[25, 50, 75, 100, 150], [25, 50, 75, 100, 150]],
"ScrollX": true,
"dom": '<"top"Biflp<"clear">>rt<"bottom"ip<"clear">>',
"buttons": [
{ extend: 'collection', text: 'Selection', buttons: ['selectAll', 'selectNone'] },
{ extend: 'collection', text: 'Export', buttons: ['excel', 'csv', 'pdf']}],
"fixedHeader": { header: true, footer: false },
"select": true,
"processing": true,
"serverSide": true,
"ajax": { "url": "ServerSide.php?PageName=<?php echo $Page; ?>", "dataType": "json" }
});
});
Hi Allan.
How can i use the where function on the server side with "IN" ?
my code example:
$this->editor_instance->where("user_id","123");
should be something like this:
$this->editor_instance->where("user_id","123,456,7878","IN");
I prefer not to do multiple conditions ( user_id = 123 || user_id = 456 .... ).
is it possible?
Thanks
I need to use datatable to add sorting, pagination, and searching to my table that I created in this example. However, I can't get it to work. I spent quite a time mitigating the type error with no luck. Whenever I try to add data tables, I get this error "Uncaught TypeError: Cannot read property 'length' of undefined" Please help me out! Please suggest a solution. I have already used Bootstrap table and dynatable. I need datatable to solve my problem of live dom sorting. Here is my code
```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form >
<div class="form-group"> <!-- Email field !-->
<label for="name" class="control-label">Name</label>
<input type="name" class="form-control" id="name" name="name" placeholder="John Doe">
</div>
<div class="form-group"> <!-- Email field !-->
<label for="mail" class="control-label">Mail</label>
<input type="mail" class="form-control" id="mail" name="mail" placeholder="name@domain.com">
</div>
<div class="form-group"> <!-- Email field !-->
<label for="mobile" class="control-label">Mobile No.</label>
<input type="mobile" class="form-control" id="mobile" name="mobile" placeholder="xxx-xxx-xxxx">
</div>
<div class="form-group"> <!-- Submit button !-->
<a id="add_row" type="submit" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete</a>
</div>
</form>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic" ">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'></tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#tab_logic").dataTable();
var i=0;
$("#add_row").on('click',function(){
var name= $("#name").val();
var mail =$("#mail").val();
var mobile=$("#mobile").val();
console.log("THE NAME IS "+ name);
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>" +name+ "</td><td>" +mail+"</td><td> "+mobile+"</td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>0){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
```
I made sure that i only use jQuery once and before importing dataTables from my research.
I want to use the 'Data Tables (v1.10)' component that came along with SmartAdmin Angular 2 framework (https://smartadmin-ng2.github.io/dashboard/analytics), and want to implement/extend most of the features listed here https://datatables.net/extensions/index, for example –
* Fixed Header
* Fixed left Columns
* Re-order columns
* Scroller
I tried some of these, but it does not work.
Has anyone in this forum used/accomplished the above? Does it work? I am not sure if there are any issues with the framework or if I am missing something.
I am looking for some documentation on –
* Steps on what needs to be done to accomplish this
* What components/packages/libraries needs to be installed
* Sample script/snippets on how these features are implemented
Any information or directions will be greatly appreciated. Thanks in advance!
Hello,
When I try to use a link in a <td>, part of the link is used as the value in the <option> for the <select> dropdown filter. I would like to have a different link for every <td> for each <tr>. Below is my code. The dropdown filter for the Office column has the options:
Edinburgh">Edinburgh
London">London
instead of just:
Edinburgh
London
<!DOCTYPE html>
<html>
<head>
<title>DataTable</title>
<!-- jQuery Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- DataTable JavaScript CDN -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<!-- DataTable Responsive JavaScript CDN Link -->
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<!-- DataTable Responsive CSS CDN Link -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td><a href="edinburghOffice.html">Edinburgh</a></td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Bill Green</td>
<td>Programmer</td>
<td><a href="londonOffice.html">London</a></td>
<td>32</td>
<td>2014/05/22</td>
<td>$150,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
</script>
Thank you
How to export multiple datatables in to multiple worksheets in single Excel workbook on single click using Datatable export buttons. Please help me.
I am working on a project in which i am inserting data in Gujarati and Hindi language but when i retrieve the data by data table it displayed as encoded data. so what should i do to display gujarati and hindi data.
Dear All,
I have 2 select boxes in the editor. Is there a way to populate the second select box using the first one while the user is creating a new record.
I had a chance to read the dependent() example but there is no clear example or post about this.
Hello,
is it possible to add a 2nd line with information to a row?
Thx for reply!
I'm using Aurelia. The following code gets run when data of a particular variable gets changed. When a new set of data is found, I recreate the entire tables.
I'm wanting to get the cell value when the user clicks a particular cell, and if they do, call a different function. However I get
Unable to get "property 'cell' of undefined or null reference", I'm not sure if it has anything to do with it but I do notice that even though I'm destroying the DataTables (e.g. this.dt.destroy()) the table seems to be sticking around because I will see the td information printed out the same number of times the data has changed.
e.g. if I reload the data 3 times and click a cell I see
"this"
<td>E</td>
"this"
<td>E</td>
"this"
<td>E</td>
if (this.dt != null) {
this.dt.destroy();
this.dt.$('#example').empty()
}
this.dt = $('#example').DataTable({
data: this.dgData,
"columns": this.dgDataColumns
});
$('#example').on('click', 'td', function () {
console.log("this")
console.log(this)
alert(this.dt.cell(this).data());
});
this.dt.clear().rows.add(this.dgData.Table).draw();
Hi I am using angular with data tables and when i add or remove a row from the table the whole table is re-rendered how can i prevent this behavior
Hi there,
I have a projekt where I am successfully using DataTables. I do have a table with about 1500 rows and all DT features are working well (Pagination, search, Display with Bootstrap, Responsive, ...) - so far so good!
I also use the TableFilter Plugin (picnet) to allow for a "dropdown" selection of elements.
However, if selecting an optoin from the Filter Dropdown, the results get filtered, but the pagination does not get updated. so the "10 lines of results" can be anywhere on the following 60 pages.
How can I manage to have DataTables to refresh what is current visible and also updating the pagination.
// Initialise Table Filter Plugin
var options1 = {
clearFiltersControls: [$('#cleanfilters')],
filteredRows: function(filterStates) {
setRowCount();
},
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) {
return true;
}
var child = tr.children('td:eq(2)');
if (!child) return true;
var val = child.text();
switch (state.id) {
case 'onlyyes': return state.value !== true || val === 'yes';
case 'onlyno': return state.value !== true || val === 'no';
default: return true;
}
}
};
function setRowCount() {
var rowcount = $('#filestable').find('tbody tr:not(:hidden)').length;
}
$('#filestable').tableFilter(options1);
$('#filestable').dataTable(
{
"paging": false //turned OFF currently to allow users to work with the tables.
});
My Table Design:
<table cellspacing="1" cellpadding="4" width="100%" id="filestable" data-page-length="25" class="table table-striped table-bordered table-hover table-condensed dt-responsive">
<thead>
<tr>
<th filter-type='ddl'>Type</th>
<th filter-type='ddl'>Language</th>
<th filter='false' class="dateFormat-yyyymmdd" style="width: 60px;">Filedate</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<td>DOC</td>
<td>english</td>
<td>20161201</td>
<td>File 1</td>
</tr>
<tr>
<td>DOC</td>
<td>italian</td>
<td>20161201</td>
<td>File 2</td>
</tr>
<tr>
<td>INSTR</td>
<td>french</td>
<td>20161001</td>
<td>File 3</td>
</tr>
<tr>
<td>INSTR</td>
<td>german</td>
<td>20161015</td>
<td>File 4</td>
</tr>
...
</tbody>
</table>
I included those files:
* //cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js
* //cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js
* //cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js
* //cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css
* //cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css
Thank you!
Hi All,
I have a dropdown field in datatables and want to make it mandatory field. If the value is "select one' then I should prompt a message below the dropdown field. EditorField.error works only for textbox.
Can anyone shed some light to get this resolved?
Thanks in advance.
Ganesh
hi i've this error when i try to populate my datatable from resutl of ajax button
my datatable:
//datatable definition
dataTable["tableUtenti"] = $('#tableUtenti').dataTable({
dom: 'frtip',
data:[],
rowCallback: function (row, data) {},
"filter": false,
"info": false,
"serverSide": false,
"processing": true,
"ordering": false,
"paging": true,
"searching": false,
"retrieve": true,
order: [[ 0, 'asc' ]],
columns: [
{"data":"id",
"title":"Id",
"class":"center-text",
"orderable":"true",
},
{"data":"userid",
"title":"User",
"class":"left-text",
"orderable":"true",
},
{"data":"text_stato",
"title":"Stato",
"class":"left-text",
"orderable":"true",
},
{"data":"text_ruolo",
"title":"Ruolo",
"class":"left-text",
"orderable":"true",
},
],
select: true,
preDrawCallback: function (oSettings) {
$(this).find('tbody').hide();
return true;
},
drawCallback: function (oSettings) {
$(this).find('tbody').show("fast", function () {
$('#loadUtenti').hide();
$('#loader-wrapper').hide();
});
},
});
my ajax call from button
$.ajax({
type: "POST",
data: function (d) {
d.utenteSearch = $("#" + id).serializeObject();
},
url: App.getGlobalWcfPath() + "GetUtenti",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
dataSrc: function (result) {
var parseJson = $.parseJSON(result.Data);
result.draw = parseJson.draw;
result.recordsTotal = parseJson.recordsTotal;
result.recordsFiltered = parseJson.recordsFiltered;
result.data = parseJson.data;
return result.data;
}
}).done(function (result) {
dataTable["tableUtenti"].clear().draw();
dataTable["tableUtenti"].rows.add(result).draw();
}).fail(function (jqXHR, textStatus, errorThrown) {
alert("errore:" + textStatus);
});