Dear all,
In Editor last version, in Editor/Format.php, beware if using dateFormatToSql with a format not including all date and time information: the function date_create_from_format is using the current time for missing data. It can create data inconsistencies.
For further versions, Allan, I suggest you add "!" in the following, as explained in http://php.net/manual/fr/datetime.createfromformat.php :
$date = date_create_from_format('!'.$format, $val);
Regards,
Gilles Boussin
Hi!
I'm using ajax request to fill dataTable. The API returns totalcount in "Response header" (I can't change the api).How can I reach response header to get totalcount in ajax call
$('#' + tableId).DataTable({
serverSide: true,
processing: true,
ajax: {
url: myUrl,
data: function (d) {
var pageIndex = d.start / d.length;
var pageSize = d.length;
var sortCol = columns[d.order[0].column].data; // Get column name from column index
var sort = sortCol + ',' + d.order[0].dir; // API sort format : "colName,direction"
var searchValue = d.search.value;
return $.extend({}, "", {
"page": pageIndex,
"size": pageSize,
"sort": sort,
"search": searchValue
});
},
async: false,
type: 'GET',
headers: {
'Authorization': authorization
},
dataFilter: function (data) { // Rename json props to satisfy datatable expectations.
var json = {};
json.recordsTotal = 26; // **responseHeader.total**
json.recordsFiltered = 26; // **responseHeader.total**
json.data = jQuery.parseJSON(data); // data.result
return JSON.stringify(json); // return JSON string
},
Whenever I export my table as a CSV file the last row of the header has the filter dropdown whenever I open the file in Excel. Is it possible to disable this feature?
(Tried to create this ticket once before but it seemed to disappear?)
So there are some databases where you shouldn't use offsets as it will scan the entire table up until that point.
Instead of:
offset 0 limit 10
offset 10 limit 10
offset 20 limit 10
You just do:
where id > 0 limit 10 order by id asc
where id > 10 limit 10 order by id asc
where id > 20 limit 10 order by id asc
So on the pagination, the next button would be /page?after={lastRowID}
and the previous button would be /page?before={firstRowID}
Is this a feature or possible at all? If not, can you modify the pagination dom at all?
Thanks.
I am very new here and want to be able to load a table and jump to a specific row based on a unique value that is in a column of the table. I can't figure how to do that.
I want to create an attendance register report that looks like this:
The information above the dates is the lesson for that day.
The JSON being returned to the jQuery is:
[{"attId":"120","cdId":"MTQ5","attMeeting":"A","attDate":"2019-01-11","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"cdId":"ODA=","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Running","attNewChum":"N"},{"cdId":"MTQ5","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Cycling","attNewChum":"N"},{"attId":"121","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-12","cdSurname":"Alistair","cdFirstName":"Tricia","attNewChum":"N"},{"attId":"122","cdId":"MTQ5","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Achilles","cdFirstName":"Tendon","attDescription":"Rowing","attNewChum":"N"},{"attId":"123","cdId":"ODA=","attMeeting":"P","attDate":"2019-01-13","cdSurname":"Alistair","cdFirstName":"Tricia","attDescription":"Rowing","attNewChum":"N"}]
The mySQL that extracts the data has a Left Join so all the names are extracted if there is a date (i.e., you can have a name followed by all columns having blanks).
Is it possible to do this?
Kind regards,
Glyn
datatable has a bug
if I set padding for column headers, when loading data dynamically
it will shuffle column width.
this is what I'm trying to add:
.dataTable thead .sorting_asc,
.dataTable thead .sorting_desc,
.dataTable thead .sorting {
padding-left: 2.2rem !important;
padding-right: 0.75rem !important;
}
https://datatables.net/extensions/keytable/examples/initialisation/stateSave
Question 1: Can this be initialized via data tags? I tried data-state-save="true" and data-keys="true" but that didn't seem to work.
Question 2: I have a table with column filters. It looks like it's restoring state correctly with the filters that I specified, but It doesn't repopulate the search params in the column filters themselves (so the user can't tell easily that it's actually a filtered list).
Sample case: https://datatables-ecommerence.000webhostapp.com/
I have no errors on the console or w3validator.
` <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>`
$(document).ready(function() {
var sum = $('#example2').DataTable().column(4).data().sum();
$('#total').html(sum);
});
I tried other columns too and they all return 0.
=====
Since I have two tables, I may have to make my own personal script because https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js uses example (not example2). That is the only thing I can think of that could be wrong.
I will post any other updates as I will be working on this for a while.
I am using DataTable 1.10.12 , and rowReorder in it. It is working fine but when I apply ordering on any column, It is not working. Please suggest me. How can I achieve it? How can I change rowReorder.dataSrc dynamically?
I'm trying to adapt Editor REST interface to my Rails app and I'm stuck in passing params to Rails 5, so it can do create. By default Editor is passing params like this:
Processing by Strongbolt::UserGroupsController#create as JSON
Parameters: {"data"=>{"0"=>{"name"=>"testing", "description"=>"test",
"users"=>{"0"=>{"id"=>"3"}, "1"=>{"id"=>"2"}, "2"=>{"id"=>"5"}},
"users-many-count"=>"3", "roles"=>{"0"=>{"id"=>"1"}}, "roles-many-count"=>"1"}}}
However I need them to be passed like this in order to Rails 5 to do Create action:
Processing by Strongbolt::UserGroupsController#create as JSON
Parameters: {"strongbolt_user_group"=>{"name"=>"this is my test group",
"description"=>"this is my test description", "user_ids"=>["2", "5"], "role_ids"=>["1"]}}
In my JS the Editor part looks like this, where in Create action I've hard-coded example values:
editor = new $.fn.dataTable.Editor( {
ajax: {
create: {
type: 'POST',
url: '/strongbolt/user_groups',
data: {"strongbolt_user_group":{
"name": "this is my test group",
"description": "this is my test description",
"user_ids": [2,5],
"role_ids": [1]}
}
},
edit: {
type: 'PATCH',
url: '/user_groups/', //Not final implementation
},
remove: {
type: 'DELETE',
url: '/strongbolt/user_group'
}
},
table: "#user_groups_table",
template: '#user_groups_form',
display: "details",
idSrc: "id",
fields: [ {
name: "name"
}, {
name: "description"
}, {
type: "checkbox",
name: "users[].id",
optionsPair: {
label: 'name',
value: 'id'
}
}, {
type: "checkbox",
name: "roles[].id",
optionsPair: {
label: 'name',
value: 'id'
}
}
]
} );
I believe I should somehow define variables and then insert them into data in my Create action, but I don't know how to do it. My idea of variables is like this:
var fname = editor.field( 'name' );
var fdescription = editor.field( 'description' );
var fusers = editor.field( 'users[].id' );
var froles = editor.field( 'roles[].id' );
How do I implement those variables to pass so Rails can do Create action, please?
Using editor server-side processing with multi-column searching https://datatables.net/examples/api/multi_filter.html. Dealing with a rediculous database (~14 billion rows, yes, that's a 'B'). Already made changes to the backend scripts to speed up processing (ie., instead of count(*), use system tables to pull row counts, or look directly at parition data versus table scans, etc). Currently trying to trigger a search via a button click, versus changes in input data.
I've disabled the listeners for change/click/keyup on the input fields, no problem. I've found countless examples of how people have done this, but for whatever reason it doesn't add up. I've tried ...
$.fn.dataTable.ext.buttons.search = {
text: 'Search',
action: function ( ) {
}
};
var table = $('#default').DataTable( {
buttons: [
'search'
]
} );
But it doesn't seem like $(this) or var table actually makes it to the function call of the button itself. If I try to define the function as a loop through table.columns(), it doesn't understand the draw function, which is why it makes me think I'm expecting it to know something it doesnt.
I've tried a number of other methods that seem to focus on the global filter, which is obviously only one box versus multiple. Can I get a hint?
Hi there,
it might be a stupid question, but I did not find anything about this topic in the forum.
Is there a possibility to address columns with names instead of array indices?
To make my question clearer: When I have to change the table for some reason, I would have to change all functions
containing an index - e.g.: order: [[4, 'asc']], - If I would insert a column to the front of the table at a later point, I would have to
recode all the indices. If there was a field name e.g. [[last_name, 'acs']] , the problem with recoding would not exist. So it would me much easier to maintain.
Thx,
Bernhard
Hello Sir/Madam,
Kindly give example of Resize and Reorder column works with functionality (individual Column search and Fixed column).
I have already found example of (individual Column search and Fixed column) at
http://live.datatables.net/diwapewa/1/edit.
I want Features Resize and Reorder column with this above example.
Waiting for response.
I want to manually trigger change event on an editor field so that the logic in
editor.dependent("", )...
Logic is re-executed.
Is it possible ?? how can I do that ?
Hi there,
Let me sketch the situation first:
I have a building. In each building live multiple residents. Each resident can have one or more budgets. (They can also have no budgets)
I made an editable overview per building in which I summarise which resident spend which amount.
My problem:
I would like to link a budget to each expense (fieldtype: select), but stumble over the difficulty that each resident has a different list of budgets. I managed to update the budget list when I'm working with a pop-up (ajax), but inline-editing is a different story.
I'm currently working with the preOpen event but triggering the ajax that retrieves the budget list even when the budget list hasn't been clicked slows everything down. Is there a way to only trigger the ajax when the budget field has been clicked?
Thanks in advance,
Gloria
Hi. Im want try to use trial editor. But i get error "Editor is not a constructor"
I take code from https://editor.datatables.net/examples/simple/simple.html
dataTables.editor.min.js is hosted on my local server. Also i checked with developer tools that all css and js are loaded.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatables</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.3/dt-1.10.19/b-1.5.4/sl-1.2.7/datatables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/editor.dataTables.min.css">
</head>
<body>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th width="18%">Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.js"></script>
<script type="text/javascript" src="assets/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="assets/js/edit.js"></script>
</body>
</html>
edit.js
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
table: "#example",
ajax: "loadAjax.php",
fields: [ {
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
// Activate an inline edit on click of a table cell
$('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "loadAjax.php",
order: [[ 1, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
Can someone tell me where is a problem?
My question is two-fold and may have one answer. I got my date fields to sort like I want in the table with moment.js - very cool. But, when I edit one of those values the editor show today's date in YYYY-MM-YYT00:00:00 format and ignore the field's current value
What am I missing? And how can I get just MM/DD/YYYY format of a sql server datetime field? The field is defined as:
{"label": "start_date", "name": "start_date", "type": "datetime" } I have tried adding a "format":"MM/DD/YYYY" which is ignored.
Thanks for any suggestions you might have.
Sean
Hi
I have published my Aurelia business project here: https://fysegplannerwebapp.azurewebsites.net/#/projects/CABL2016/employee/28/plan
Y have configured the DataTable in this way:
configureDataTable() {
this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
info: false,
searching: false,
paging: false,
scrollX: true,
fixedColumns: { leftColumns: 4 },
scrollY: "400px",
scrollCollapse: true,
data: this.projectOutSourcingData,
columns: this.columns
});
}
because I want to fix the first 4 columns but does not work. I don't know if is problem of the extension or what
Any idea Please?
Regards
Hello, regarding new $.fn.DataTable.Editor.DateTime() I noticed that the selected date is actually a property on the instance.
This is making some plugin development pretty difficult for us. The OnChange event has no arguments so we can not properly set up hoods with the Editor DateTime Field.
Can you please pass the selected date back when you internally call OnChange?