Hi,
i want exactly the table should be rendered in https://datatables.net/extensions/responsive/examples/styling/scrolling.html with beautiful green buttons. i created an html with all the details and references. however the table is not responsive neither the buttons are being displayed. Could you please kindly help me with my ignorances?
Posted the Html file for reference in JsFiddle.
https://jsfiddle.net/wcyy4199/1/
Thanks.
where can I get the column filter plugin
Dear All,
oTable = $('#MyDataTable').DataTable({
"ajax": {
"url": "",
"dataSrc": function (json) {
return json;
}
}
});
after this I want load this table later
oTable.ajax.url("../User/GatUserData").load();
problem is when url blank still a request goes to the base url
Thanks
sbsen.
I have a Problem with the Pagenation and the Showing Text. The Table has only 3 Entries and the Pagenation show me " Previous 1 2 3 4 5 ... next" - Buttons. The 3 entries are shown in the tables. I can selected and editing the entries. On the left line in the Pagenation Line are following text: Showing 0 to 0 of 0 entries (filtered from NaN total entries)1 row selected. I use the last Version of Datatables, editor, Buttons, Select with bootstrap support. The Datatables debugger: http://debug.datatables.net/egoqed
Thanks for Helps
Andreas
my JS code is this:
$(document).ready(function(){
$('<div class="loading">Loading</div>').appendTo('body');
editor = new $.fn.dataTable.Editor({
ajax: 'assets/lib/ev_server_processing.php',
table: '#athletelist',
fields: [{
label: 'First name:',
name: 'firstname'
},{
label: 'Last name:',
name: 'lastname'
},{
label: 'Name Prefix:',
name: 'nameprefix'
},{
label: 'Birthday:',
name: 'birthday',
type: 'datetime'
},{
label: 'Nationality:',
name: 'nation',
type: 'select'
},{
label: 'Reg ID:',
name: 'regid'
}]
});
var table = $('#athletelist').DataTable({
initComplete: function(settings, json){
$('div.loading').remove();
table.buttons().container().appendTo($('#athletelist_wrapper .col-sm-6:eq(0)'));
},
lengthChange: false,
processing: true,
serverSide: true,
ajax: 'assets/lib/ev_server_processing.php',
autoWidth: false,
columns: [
{ data: null, render: function(data, type, row){
if(!data.nameprefix){
name = data.lastname+', '+data.firstname;
}else{
name = data.nameprefix+' '+data.lastname+', '+data.firstname;
}
return name;
}, width: '20%' },
{ data: 'birthday'},
{ data: null, render: function(data, type, row){
age = getAge(data.birthday, '');
return age.years;
}},
{ data: 'nation'},
{ data: 'regid'},
{ data: 'id'},
{ data: null, defaultContent: '', orderable: false},
{ data: null, defaultContent: '', orderable: false}
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{ extend: 'collection', text: 'Export',
buttons: [
{ extend: 'copyHtml5', ClassName: 'btn btn-sm btn-default', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy'},
{ extend: 'excelHtml5', ClassName: 'btn btn-sm btn-default', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel'},
{ extend: 'csvHtml5', ClassName: 'btn btn-sm btn-default', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV'},
{ extend: 'pdfHtml5', ClassName: 'btn btn-sm btn-default', text: '<i class="fa fa-file-pdf-o"></i>', titleAttr: 'PDF'},
{ extend: 'colvis', ClassName: 'btn btn-sm btn-default', text: '<i class="fa fa-list-ul"></i>', titleAttr: 'Column visibility'}
]
}
]
});
});
server side Code:
if((include PLUGIN_DIR.'DTables/Editor/1.5.6/php/DataTables.php') == FALSE){ echo 'Failed include Edit'; }
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
Editor::inst( $db, 'entries_test' )
->fields(
Field::inst( 'id' ),
Field::inst( 'firstname' )->validator( 'Validate::notEmpty' ),
Field::inst( 'lastname' )->validator( 'Validate::notEmpty' ),
Field::inst( 'nameprefix' ),
Field::inst( 'birthday' )
->validator( 'Validate::dateFormat', array(
"format" => Format::DATE_ISO_8601,
"message" => "Please enter a date in the format yyyy-mm-dd"
))
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
Field::inst( 'nation' )->validator( 'Validate::notEmpty' ),
Field::inst( 'regid' )
)
->process( $_POST )
->json();
Hello all. As a DataTables novice, I was hoping that I might be able to get some help with the Server-Side aspect of DataTables. I understand it from a high level view, but I've been getting confused once it gets into the implementation of the "ssp.class.php" file and the "SSP::simple()" / "SSP::complex()" type functions.
Does anyone have or know of any sort of Step-by-Step (For Dummies) guide for these features? Something that may show how to do Querying operations like "WHERE" or "JOIN" into a database?
Any information that you can provide would be greatly appreciated.
I looked for another way to reach out regarding my purchase but found only the forum. I purchased the single developer license on 8/4 and did not receive an email regarding the purchase. I did check spam and also noticed that when I'm logged in to the DataTables site, it shows that I have one developer license to download but there are no links/buttons under the action column. When I checked the invoice, it seems that it was not paid, even though I did pay and got to the confirmation page.
I also wanted to tell you that your product is really good and well documented.
Thanks.
Hi,
When i click a button it shows datatable with id of "taskmodal" in modal view like here
$("#taskModal").modal('show');
and then i use editor with inline editing in modal view. (like here:https://editor.datatables.net/examples/inline-editing/simple.html) When i click the New button, the New form is under the modal div so that i can't reach the create form. So how can i fix this, i want to open new form over modal.
Thanks.
Hi
I'm selecting a row and then opening a popup window, I'm using the 'uID' assigned to the row to receive details from a database and then populating a form.
When the form is saved I'm updating the row using the following:
$('#form').dataTable().fnUpdate([name] ,$('tr#' + uID)[0], 0 );
$('#form').dataTable().fnUpdate([ID] ,$('tr#' + uID)[0], 1 );
$('#form').dataTable().fnUpdate([staff] ,$('tr#' + uID)[0], 2 );
This all works fine, but sometimes when the row is updated it moves up the table.
eg: I select row 5. Click update and it moved to be between rows one and two.
No data is lost, but why does it move ? is there any way to update it and leave in the same position is started in ?
Thanks 
Hi all. DataTables novice, so thank you in advance to anyone that can assist me. My head is swimming right now from trying to find my answer in an example. How can I use an array of objects from AJAX as a data source?
Right now, I'm calling a PHP page, which is doing a json_encode at the end. I've verified that it is valid JSON, in the following format:
[
{
"MONTH":"1",
"TIME":"15:00",
"TEXT":"Blah"
},
{
"MONTH":"1",
"TIME":"14:21",
"TEXT":"Blah2"
},
...
]
The only way I've made a valid DataTable with this data is to convert it into a 2-D Array. Which works, but doesn't seem like the best way to go about things. My Javascript is shown below:
$.ajax({
type: "GET",
url: '/test.php',
dataType: 'json',
success: function (obj, textstatus) {
var dataSet = new Array;
if (!('error' in obj)) {
$.each(obj, function (index, value) {
var tempArray = new Array;
for (var o in value) {
tempArray.push(value[o]);
}
dataSet.push(tempArray);
})
$('#example2').DataTable({
data: dataSet,
columns: [
{ title: "Month" },
{ title: "Time" },
{ title: "Text" }
]
});
}
else {
alert(obj.error);
}
},
error: function (obj, textstatus) {
alert(obj.msg);
}
});
I was initially looking at doing this server side, but that whole setup was going over my head, so I just tried to get a data object. Any help would be appreciated.
Hello,
This is really not a problem but a how to question:
If I have a table that has a field that is a foreign key in another table, SQL responses properly with an error message stating that the row cannot be deleted when the user tries to delete the row in the Editor.
My question is how to best to handle the error in the Editor and tell the user that this row cannot be deleted. Right now it just shows the SQL error string in red at the bottom of the Editor popup.
This is the response that I would like to handle better:
SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails ...
Thanks
Hello,
I have datatable with state saving and individual column search. Like in this example code: https://jsfiddle.net/r4wornfa/1/ To set back (after page reload) searched in colum value, I need to do state restore to get back entered in filter value. This works fine, but when i added the restore state piece of code, paging state is lost. Just go to example above, and change page, than reload fiddle. Does anyone know why this paging is lost ?
Is posible change the layout of Add, Edit and Remove functions. I dont want to use the lightbox, y want to make my own style for these functions.
Good Day,
Hi there,i'm just a newbie here.I just want to ask how can i insert datatables plugin that includes paging sorting filtering in my php script,here is my sample script: https://jsfiddle.net/aport71125/u6gv263c/
Thank you in advance.
Hey guys, I'm new to jquery Datatables, and I have a problem. I want the datatables to show the same on every screen.
For example, I have 1920x1080, but when I'm using 1366x768 I have to scroll the screen to se other columns, but I want the table to be just smaller to fit the screen.
How can I do that? using some kind of container, or datatables function?
Greetings, Rafał
When we initially loading datatable it shows loading status like "Loading...". But when we use ajax.reload() there is no feedback. Could it be added? I know maybe I can use events to somewhat make it manually, but still it is strange that it is not there
See example — if we sort by some column we can see that cells changing their width causing table columns to jump horizontally. Can we avoid that somehow and make columns width fixed while keeping horizontal scroll? The main example does not have that. Seems like in case of horizontal scrolling autoWidth option has no effect.
In my app there is a part where the user adds products for a sale. When adding items a table in same the page is filled. This is a temprary table that need to be used only one time (just for that sale) and has to be fast. So it is not a db table, this is saved in a Session variable as a list.
Is there anyway to implement Datatables Editor in this case? Since there is no "real" table in the DB. I'm using .Net MVC C#
Hello,
I have a table where the first column is a checkbox, which enables you to select several rows. With these rows selected you are then able to do certain actions.
However i have troubles figuring out which rows have been selected, they dont seem to correspond to the viewing order.
var checkboxes = document.getElementsByClassName("chk");
for (i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].checked==true)
{
console.log(i);
}
}
Gives me the indexes of the selected rows in the viewing order, however when i try to delete one of them using this index:
table.rows(i).remove()
another row gets removed. I used this to see if the values corresponded:
var checkboxes = document.getElementsByClassName("chk");
for (i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].checked==true)
{
console.log(i);
console.log(table.row(i).data());
}
}
they did not 
So my question is, how can I use the checkboxes to remove the correct rows?
I am trying to show the datatables on the right page (pagination) with the current date or later with the help of the jumpToData() function, e.g. today is the 2016-08-08. The page of the datatables should automatically (when finished loading) be set on this date (column 0). If the date is not available it should jump to the page with the next date available. So far I have this code:
jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
var pos = this.column(column, {order:'current'}).data().indexOf( data );
var followingdays = 0;
while(pos == -1 && followingdays < 10){
var day = (parseInt(data.subString(8))+1);
if(day > 31){ //wenn >31 monatswechsel
day = "01";
var month=parseInt(data.subString(5,7))+1;
var year = parseInt(data.subString(0,4));
if(month < 10){
month = "0" + month.toString();
} else if(month > 12){
year = year + 1;
}
data = year.toString() + "-" +month + "-" + day;
}else if(day < 10){
day = "0" + day.toString();
data = data.substring(0,8) + day;
}else{
data = data.substring(0,8) + day;
}
pos = this.column(column, {order:'current'}).data().indexOf( data );
followingdays++;
}
if ( pos >= 0 ) {
var page = Math.floor( pos / this.page.info().length );
this.page( page ).draw( false );
}
return this;
} );
This is a workaround however since I just look at the current date plus the following 10 days and not the general future of the current date. I can live with that for now hence my first question is that I get a TypeError in the line.
var day = (parseInt(data.subString(8))+1);
and I dont know why. data.subString(8) should be '08' in the example given. data is correct: '2016-08-08'. The jumpToData() is called in my initComplete method of the datatables:
"initComplete": function(settings, json) {
var ftable = $('#table_fuehrungen').DataTable();
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = yyyy+"-"+mm+"-"+dd;
ftable.page.jumpToData( today, 0 );
},
Thus my first question is why there is a TypeError on the given line and the second quesion is how do I code it better to jump to the page with the generic future of the current date?
I am using DataTables 1.10.12.
I have a screen in which certain data are displayed. I am using datatable option to display the data and rowselector to select the row. If I select any row some option will pop up through which user can manipulate the data(like edit and delete), but i want some data to be non editable.
I have a screen in which i am showing data on month basis, like if current month is August then my page will show previous two months data and the next 10 months data.
Now i want current months and previous two months data to be non editable or disable while selection the row through rowselector.(data screenshot has attached)
Below is the my View page and rowselector function:
<i:dataTable id="ConfigurationOne"
headerClass="dataTableCommonHeader"
headerClasses="table_header"
columnClasses="stringColumn, stringColumn w80"
rowClasses="level2ColorStyle, level1ColorStyle"
value="#{configOneBean.monthsDateList}" var="row" cellpadding="0"
cellspacing="1" columnWidths="50px,100px" rows="25"
width="40%"
onrowmouseover="this.style.cursor='default';this.style.backgroundColor='#F1F1F1';"
onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
>
<i:column>
<i:rowSelector value="#{row.selected}"
selectionListener="#{configOneBean.rowSelectMonthsListener}" />
<f:facet name="header">
<i:outputText value="#{resApp['config.type.code']}" />
</f:facet>
<i:panelGroup style="width:200px;overflow:hidden;">
<i:outputText value="#{row.NRPV_NRPA_CODE}" />
</i:panelGroup>
</i:column>
<i:column>
<f:facet name="header">
<i:outputText value="#{resApp['config.type.name']}" />
</f:facet>
<i:panelGroup style="width:200px;overflow:hidden;">
<i:outputText value="#{row.NRPV_CREATED_BY}" />
</i:panelGroup>
</i:column>
public void rowSelectMonthsListener(RowSelectorEvent event) {
int selectRow = event.getRow();
initActionMap();
if (event.isSelected()) {
this.monthsDate = monthsDateList.get(selectRow);
getAllMonthsAndDate();
actionMap.put(WorkMode.EDIT_GROUP, true);
} else {
this.monthsDate = null;
workMode = WorkMode.EMPTY;
}