What happened with: https://datatables.net/forums/discussion/24934/is-it-possible-to-load-the-config-of-datatables-async ?
As localStorage can be wiped anytime by the browser or the user I want to opt with an server side solution. But the async: false prevents from multiple tables loading in parallel, resulting in a bad user exprerience. Any solutions?
Async loading of state
↧
↧
Editor: Bulk row creation based on single Editor form?
I have an Editor form with 14 fields. The first field is called Barge.
My users would like to do bulk row entry where they can select multiple Barges and enter the data for the remaining 13 fields. Once they hit submit, a new row would be created for each barge in the array with the remaining 13 fields the same for each barge row.
I created a custom field plug-in that allows the multi-selection for the barges and returns an array.
I am looking into using the create() api function and passing in the length of the array as the count option, but I'm getting hung up on where/when I should call create(). At first, I tried to catch the preSubmit and create the additional rows, but that wasn't working out very nicely.
Please assist! Thank you.
↧
Multiple Server side calls when trye to call new FixedColumns (....)
Hi,
When i try to call new FixedColumns (...) after "fnInitComplete" multiple server side calls are going ,when i placed new FixedColumns (....) before "fnInitComplete" there is only single call that means everything is going smoothly, so i don't know why there are so many server script calls when i change the position , please help me.
↧
Foundation 6 Reveal & DataTables Pagination
Hi All,
I've been trying to get a DataTable to work inside a Foundation 6 Reveal modal, but whenever I click on a pagination button it closes the modal.
If you open the modal back up, you can see that it has changed the page, but how do I prevent it from closing the modal?
Here is a JS fiddle demonstrating this: https://jsfiddle.net/Lts99vL1/
Many thanks for any ideas.
↧
Datatable doesn't work in twentysixteen wordpress theme.
Hi,
We have built a web-site using twentysixteen wordpress theme.
I have created a sample page with html content as below
The below html works fine when i saved in my local system and browse via chrome. However the same datatable is not rendering properly when i inserted in the word press page.
Please kindly help me on how to resolve this.
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/r-2.1.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/r-2.1.0/datatables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: 300,
paging: false
} );
} );
</script>
<style>
div.container { max-width: 1200px }
</style>
</head>
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
.....
......
</tbody>
</table>
Thanks
↧
↧
editor plugin implementation for vertical html table
I have a table which is vertically oriented, which means first columns are field name & second column is the value. is this table work with inline editing with dataTable? attached is a screen of the table which I meant.
Thanks
↧
Problem in export buttons
Hi all,
I am using https://datatables.net/extensions/buttons/examples/initialisation/export.html for my reports
I have put below code on document ready
$(document).ready(function() {
BindInvoiceReport();
$('#example').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
});
});
function BindInvoiceReport() {
$.ajax({
type: "POST",
url: "/admin/invoice-report.aspx/GetInvoiceReport",
data: '{"FromDate": "' + $('#txtFromDate').val() + '","ToDate": "' + $('#txtToDate').val() + '"}',
contentType: "application/json; charset=utf-8", dataType: "json",
success: function(datas) {
var dt = $.parseJSON(datas.d);
if (dt.totalRecords > 0) {
$('#tblOrders').html('');
$('#tblOrders').html(dt.result);
$('#tblPagingF').html(dt.paging);
}
else {
$('#tblOrders').html('');
}
window.setTimeout(function() { CloseHlsPopup(); }, 200);
}
});
}
In BindInvoiceReport i am binding data to table which is below
| Invoice Id # | Customer | Cashier | Order Date | Invoice Type | Options | Details | Sub Total | Total ($) |
|---|
But buttons are not working i cannot use any of functionality. If i am putting static data then it is working fine.
Please help me guys
↧
my datatable is not working...pls help..here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css' rel='stylesheet' />
</head>
<body>
<table id="test" class="display">
<thead >
<tr >
<th><strong>Course Number</strong></th>
<th><strong>Course Title</strong></th>
<th><strong>Units</strong></th>
<th><strong>Accounting Units</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>ENG100</td>
<td>Communication arts 1</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>ENGL101</td>
<td>Communication arts 2</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>bsit121</td>
<td>Reading and Speech</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>bsit100</td>
<td>Communication arts 1</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>relb100</td>
<td>Life of teaching of Jesus</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>fili100</td>
<td>Sining ng komunikasyon</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>fili101</td>
<td>Pagbasa at pagsulat</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
↧
DataTables column name containing brakets
First of all I'm using DataTables version 1.10.12
Follow an example:
Columns:
columns: [
{title: "Id", data: "id"},
{title: "Name", data: "Person[name]"},
{title: "Gender", data: "Person[gender]"},
]
Data
[{
"id":"1",
"Person[name]":"Foo Bar",
"Person[gender]":"M"
}]
The result of this grid will render only id field, how can I use brackets as key values?
This question is asked too in Stack Overflow:
http://stackoverflow.com/questions/38624131/datatables-column-name-containing-brakets?noredirect=1#comment64634463_38624131
↧
↧
Tab on header does not scroll the table body
I am using the latest version of datatables. The table has many columns and displays a horizontal scroll bar. When I use mouse to drag the scroll bar to the right, the columns and headers are getting aligned correctly. However, when I use tab key to move along the column headers to the right, the table body does not scroll, only header part is moving to the right. This is causing issue for keyboard only users.
**Here is a demo of the issue. **
https://jsfiddle.net/6pd5dxm5/
any ideas or help would be appreciated.
Thanks,
preciosumnd.
↧
Update select options, losing the field when submit
HI,
I need to add assistant, update the options of the select with a list of all assistant available dynamically,
I'm building the editor, calling in ajax the list of assistant, and updating select options after create the editor.
All work except when i'm submit informations, i'm loosing the Staff information in POST element send.
Can you help me to understand ?
$('#assitant').on( 'click', function (e) {
e.preventDefault();
var options = [];
$.ajax({
...
success: function (json) {
options = JSON.parse(json);
editor
.create(
"New assistant",
{ "label": "New assistant", "fn": function () { editor.submit() } }
)
.field('staff').update(options);
}
});
});
editor = new $.fn.dataTable.Editor( {
ajax: 'staff.php',
fields: [
...
{
label: "Assistant",
name: "staff",
type:"select",
options: []
},
...
]
});
}
Regards,
↧
pdfHtml5 exportOptions to remove nested tags
Hello,
I'm having some trouble with nested html tags when using the buttons plugin with pdfHtml5.
The text in my cell is wrapped in two nested <div> and a <p>. In the PDF export, I only need the contents of the <p>
<td>
<div class="flagimg" style="background-image: url(...)">
<div class="flagtext">
<p>name of country</p>
</div>
</div>
</td>
The nested <div> and <p> are creating additional space above and below the cell data, which makes the PDF very long.
I would like to remove nested html tags, but I'm not sure how to write the syntax right.
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row) {
data = data.replace(/<div class="flagtext"\">/, '');
data = data.replace(/<.*?>/g, "");
return data;
}
}
}
};
Can anyone help me with this?
↧
avoid decimal conversion in excel and cell alignment
i need to avoid decimal conversion for part no(need it as a whole number without decimal) and also need to align center for some of the excel columns
↧
↧
Update A row with client side ajax implemetation
Hi,
We are trying to achieve the same behaviour like this example:
https://editor.datatables.net/examples/inline-editing/simple.html
where an update to a cell returns from the server the updated row which is than refreshed.
The difference is that we are implementing the calls to the server using a REST API and than passing the updated row to the datatable using the
$('#XXX').DataTable().row(rowIndex).data(result);
We receive an error:
https://datatables.net/manual/tech-notes/4
A few things that we don't recieve:
1. We don't see the nice refresh row effect.
2. When we try to edit the cell again it opens for edit, but throws the a null pointer exception in the following line:
// Remove from DOM, keeping event handlers, and include text nodes in remove
var children = node.contents().detach();
Thanks,
Yishay
↧
Change PDF orientation by number of visible columns
Hello,
I don't know if I am missing any detail from the plugin or if it is something I am missing from JQuery, but I have been struggling with it for too long already, so I am already asking for sorry if it is so simple to be solved :)
I am using the html5 PDF export, and I have been trying to change the PDF orientation accordingly to the number of visible columns. It does works with the initial table, but once I toggle any column the number doesn't update - neither the orientation.
I am trying to change the parameter by the initialization script on my HTML code.
How could I solve it?
Thanks in advance.
↧
Datatable speed
Hi,
Im new to datatable.I was using the below and it takes 10 sec to load the datatable.How can i speed it.
Jquerycode:
$(document).ready(function() {
var table = $('#myTransactionitems').dataTable(); //Initialize the datatable
var user = $(this).attr('id');
if(user != '')
{
$.ajax({
url: 'transactions',
dataType: 'json',
success: function(s){
console.log(s);
table.fnClearTable();
for(var i = 0; i < s.length; i++) {
var disp1 = '';
if (s[i][4] != 'Reserved') {
disp1 = 'display:none;'
}
table.fnAddData([
"<form method='post' action='reservesplit'><input name = 'transactionid' type='hidden'\
value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\
</input></form>",
s[i][1],
s[i][2],
s[i][3],
s[i][4],
s[i][5],
"<form method='post'><input name = 'transactionid' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationid' type='hidden'\
value='"+s[i][2]+"'><input name = 'splitamount' type='hidden'\
value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid' style='" + disp1 +"' class='btn btn-sm btn-success pull-left '>\
</input></form><form method='post'><input name = 'transactionid' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationid' type='hidden' \
value='"+s[i][2]+"'><input name = 'splitamount' type='hidden'\
value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel' style='" + disp1 +"' class='btn btn-sm btn-danger pull-right'>\
</input></form>"
]);
} // End For
},
error: function(e){
console.log(e.responseText);
}
});
}
$('form').submit(function(){
$(this).find(':submit').attr('disabled','disabled');
$(this).parent("form").submit();
});
});
php code database:
<?php
include('sessionstart.php');
include('session.php');
require_once("dbcontroller.php");
$db_handle = new DBController();
$conn = $db_handle->connectDB();
$user_id = $_SESSION['login_user_id'];
$query = "select ID,RECIPIENT,DONATION_ID,AMOUNT,STATUS,CREATED_DATE from MYTRANSACTIONS_LIST where userid = ?";
$stmt=mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, 'i', $user_id);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $id, $recepient,$donation_id,$donation_amount,$status,$createdDate);
while (mysqli_stmt_fetch($stmt)) {
$output[] = array($id, $recepient, $donation_id, $donation_amount,$status,$createdDate);
}
mysqli_stmt_close($stmt);
echo json_encode($output);
$db_handle->closeDB($conn);
?>
Is there any better way to improve the performance?.
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
Nuget missing for recommended 1.10.12 update
The buggy 1.10.11 version is the latest that can be found on Nuget. Can the 1.10.12 be posted to Nuget since this is recommended for all DataTable users?
↧
↧
How to use server side processing with colReorder and rowCallback html changing?
When I reorder columns, they reset to state before rowCallback action.
To see example go to Server-side processing example page
Enter this script in command line:
$('#example').dataTable({
processing: true,
serverSide: true,
rowCallback: function(row, data, index) {
$('td:eq(3)', row).html( '<b>Test</b>' );
},
ajax: "/examples/server_side/scripts/objects.php",
columns: [
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary" }
],
colReorder: true,
destroy: true,
});
And try to reorder the columns. The new html will reset.
p.s. When I do $('td:eq(3)', row).replaceWith($('td:eq(3)', row).clone().html( '<b>Test</b>' )); it works, but I have another trouble with show/hide columns: jquery.dataTables.js:8478 Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
At line:
// insertBefore can act like appendChild if 2nd arg is null
tr.insertBefore( cells[ column ], cells[ insertBefore ] || null );
So I think what it is wrong decision.
↧
Please I urgently need assistance
I just recently started using Datatable. I couldn't do a individual column with. It is not showing at all and I urgently need it for a project. Please how can I get the Plugins required. Tanx
↧
huge data in jquery datatable cannot scroll to bottom?
I am using jQuery Data Table plugin where I select a lot of data from server side. I try to using scroll to display these huge data (more than 500,000) ,
but when I scroll to the end of the bottom , It's will back to top. And I found it's cannot scroll more than 10000 records. It's will back to top soon.
my code as follow,
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none';
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"jQueryUI": true,
"ordering": true,
"searching": true,
"order": [[1, 'desc']],//default
"lengthMenu": [
[50, 100, 1000],
[50, 100, 1000]
],
"ajax": {
url: "process.php",
type: 'POST',
data: {
start: "<?php echo $start; ?>",
end: "<?php echo $end; ?>"
}
},
"columns": [
{
"className":'details-control',
"orderable":false,
"data":null,
"defaultContent": ''
},
{ "data": "time"},
{ "data": "message","orderable": false}
],
"dom": 'frtiS',
"scrollY": 600,
"scroller": {
"loadingIndicator": true
},
"deferRender": true
} );
Please help me do that, or suggest better solution.
↧
More Pages to Explore .....
