I tried few sample examples here on this site and observed that paging does not always take me to the top of the table (it takes me sometime at the center and sometime at the bottom of a table).
Hope to control this behavior? Any help will be appreciated. Thanks!
Note: I display 50 records per page in my table.
↧
Paging does not take me to the top of the table
↧
DataTables and Webpack
Hi there -- I'm using DataTables in Webpack and following the instructions here: https://www.datatables.net/download/npm
The interesting thing about Webpack is that it provides BOTH AMD and CommonJS environments, so when the datatables.net module checks for what to export, it defaults to the AMD module. This breaks everything if in fact you used a CommonJS require() to import the module. What you get is a very mysterious 'cannot set $ of undefined' error.
It took me a while to figure this out but as far as I can tell there are two ways to fix this without modifying the datatables.net code:
(1) Disable AMD entirely in Webpack (see http://stackoverflow.com/questions/29302742/is-there-a-way-to-disable-amdplugin); or
(2) Do NOT immediately invoke datatables.net as instructed at https://www.datatables.net/download/npm. In other words, just require the file without invoking or passing arguments. I'm not exactly sure why this latter solution works.
I suppose an additional solution would be to just embrace the AMD dependency but I have not tried this.
I like DataTables a lot so posting this here to help anyone else out that may run across this issue.
swinc
↧
↧
Can a screenreader read the data table column name along with the cell value?
I am using NVDA. I have a data table with 5 columns and many rows. The second column name is "Age".
There is a value 10 under the column Age (say in the first row).
The screen reader is reading it as "10 Column 2". Is there any way I can get it to read as "10 Age"? I am using scrolling for the data tables.
Please help.
↧
Difficulty linking JS & Server Side Processing PHP
Hi there, I am using DataTables for a project I'm working on and got my DataTables working just fine, but when I remove the JS code from the footer.php include and put it in its own JS file (I will have multiple DataTables so it will be cleaner for the JS to be in its own file instead of in footer.php) everything breaks. Any thought why?
Here is my JS code:
<script>
$(document).ready(function() {
$('#aging_projects').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../inc/aging-projects-server-processing.php"
} );
} );
</script>
I placed that code in a JS directory in its own file and included the script tag in the footer. The footer.php is in a separate INC directory along with the aging-projects-server-processing.php and ssp.class.php. Why is my data not displaying? When I simply place the script in the footer and change the path to aging-projects-server-processing.php it works just fine.
Thank you for your help!
↧
Help! filter data colum > 0
Hi i have a colum with numbers, I need to filter only > 0 with the search input, please any help?
i have try this, but it does not work
var table2 = $('#tbArticulos').DataTable();
$('#tbArticulos_filter input').on( 'keyup', function () {
//var that = this.value;
//alert(that);
var that=0.00;
table2
.columns( 6 )
.search( !that )
.draw();
//table.column.search('0.00',true,false).draw();
} );
↧
↧
Excel button
Is there a way to automatically execute the excel button once the page is loaded instead of a user selecting the excel button?
thanks,
_ Ed
↧
Sorting column and using cell() function
I have a datatable with a sortable column. Clicking the header sorts it. So far so good.
However, after sorting, I then want to iterate the cells in the column. So I do this:
datatable.column(".latest").nodes().each(function (node, index, dt) {
var the_cell = this.cell(index, '.sto_bid').node();
}
However, this pulls back the cell before the column was sorted. In other words, index=0 is pulling back what is now the last cell in the column. How do you reset the indexes when you sort, so cell(1, '.sto_bid') will return the first cell shown in the table?
↧
Editor does not update primary table when using LeftJoin()
Hi there
I noticed that Editor is not updating my primary table when using LeftJoin(), it simply ignore the change. Interesting that Datatables for .NET does not throw any exception, indicating that it may be a code issue. Then I started to debug and realized that it never runs the following code inside method private Result _InsertOrUpdateTable
var fieldPart = _Part(field.DbField(), "field");
set.Add(fieldPart, field.Val("set", values));
As an effort to figure out what was going on, I decided to manually add the primary table name to the field variable and it worked.
However, I still don't know how to permanently fix this.
I investigated this forum for similar question but could not find an answer to it.
Basically, I created two tables on SQL Server:
Table Transaction: id, amount, vendorId
Table Vedor: id, name
C# Transaction Controller:
[Route("api/transaction")]
[HttpGet]
[HttpPost]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public IHttpActionResult Transaction()
{
var request = HttpContext.Current.Request;
var settings = Properties.Settings.Default;
using (var db = new Database(settings.DbType, settings.DbConnection))
{
var response = new Editor(db, "Transaction")
.Model<TransactionModel>()
.TryCatch(false)
.LeftJoin("Vendor", "vendor.id", "=", "Transaction.vendorId")
.Field(new Field("vendor.name"))
.Process(request)
.Data();
return Json(response);
}
}
Thanks very much for the support
↧
jQuery 3?
Using version 1.10.12 I found that I cannot dismiss the column picker when using jQuery 3.
I have manually fixed this by replacing "andSelf" with "addBack" which certainly seems to work without a problem.
Are there any plans to make Datatables compatible with jQuery 3 or should I steer clear for a while?
↧
↧
When datatables returns results that are empty, the "datatables_empty" class doesn't get added
Hi all - weird problem. Sometimes the datatables_empty class gets applied when there's no results but other times it doesn't. Is there a way to write code to say if the results are empty, add this class (with the required colspan)? Thank you. The image is below.
↧
JQuery V3 Deprecated: .bind() and .delegate()
Link: https://jquery.com/upgrade-guide/3.0/#deprecated-bind-and-delegate
function _fnBindAction( n, oData, fn ) uses .bind but this is now deprecated.
↧
Datatables not respecting columns.className
I am trying to put a button in a specific column (e.g. a named column). I need to do this as I won't know if this column is the the 5th or the 2nd in the index so a numbered index won't work.
Based on the documenation it states that I can use columns.className to put a class on the <td> tag and based on this documentation it should work https://datatables.net/reference/option/columnDefs. I would expect that column to have a button in it as both the th and td have a class name "test".
Here is a fiddle of the issue.
http://live.datatables.net/luxuxere/4/edit?html,css,js,output
↧
alter dataTable after initialization
I have a script on my site that initializes and builds a dataTable. in a separate script I want to be able to alter aspects of the table after it's built. specifically, I want to hide a column.
I tried the usual $(document).ready(function(){ /hide column/ }); but it has no awareness of the data columns. is there any way to either get awareness that the table has been built (and can then be interacted with) or to impact with direct dataTable function calls?
↧
↧
how can i hide and show the last row ?
hi , i try ti hide /show the last row by call some function.. that what i do 
for(var i=0 ;i < oTable.fnGetData().length ;i ++){
if (oTable.fnGetData(i)[2].includes("somthing")) {
oTable.fnGetData(i)[2].hide();
}
}
how can i do it right?
tnx!
↧
DataTables Editor and Django
I have successfully implemented the DataTables Editor Bootstrap example from this site in my Django project. I use a forloop.counter to identify each row. That populates to popup as shown in the attached image.
<tbody>
{% for row in queryset %}
<tr id=forloop.counter> <!-- Needed for DataTables row identification -->
<td>{{ row.code }}</td>
<td>{{ row.description }}</td>
</tr>
{% endfor %}
</tbody>
Successful only so far I should say...
My problem is I do not know how to replace the PHP code in the example provided on this site with something that will achieve the same result in Django. The disconnect for me is how to setup the Ajax, JSON, etc. I can get Ajax to work in Django using a Django form with it's own submit button, but I've not figured out how to do same with the DataTables Editor form (see image) and the JSON part.
The solution is likely trivial and I'll kick myself once I see it, but I've not been able to locate anything on the Internet, in the forums, etc. that speaks to this.
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
$(document).ready(function edit_skus() {
var editorCM = new $.fn.dataTable.Editor( {
//ajax: "",
table: "#theader",
fields: [ {
label: "CODE:",
name: "CODE"
}, {
label: "DESCRIPTION:",
name: "DESCRIPTION"
}]
} );
if ( !$.fn.dataTable.isDataTable( '#theader' ) ) {
var table = $('#theader').DataTable( {
lengthChange: false,
//ajax: "",
columns: [
{ data: "CODE" },
{ data: "DESCRIPTION" }
],
select: true
} );
}
// Display the buttons
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editorCM },
{ extend: "edit", editor: editorCM },
{ extend: "remove", editor: editorCM }
] );
table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
$('#theader tfoot th').each( function () {
var title = jQuery(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// Apply the search
table.columns().every( function () {
var that = this;
$('input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
FixedColumns already initialised on this table
I am getting the error: FixedColumns already initialised on this table
But this is the first time I've initalized it.
$(document).ready(function(){
timeslot_distribution_report_table#myrand# =
$("##timeslot_distribution_report#myrand#").dataTable
(
{
"scrollCollapse": true,
"paginate":false,
"filter":false,
responsive: false,
"destroy": true,
"scrollX": "99.99%",
fixedColumns: {
leftColumns: 1
}
}
);
});
when i do it like this:
$(document).ready(function(){
timeslot_distribution_report_table =
$("##timeslot_distribution_report#myrand#").dataTable
(
{
"scrollCollapse": true,
"paginate":false,
"filter":false,
responsive: false,
"destroy": true,
"scrollX": "99.99%",
"initComplete": function(settings, json)
{
new $.fn.dataTable.FixedColumns(timeslot_distribution_report_table, {
leftColumns: 1,
heightMatch: 'auto'
} );
}
}
);
});
i get:
ReferenceError: timeslot_distribution_report_table is not defined
/manager_pro.cfm?action=managegames&league=598&content_action=view_schedules&schedule_id=36153:15
ignore the double quotes. theyre intended (for escaping purposes)
↧
Cross Column Validation - C#
Problem:
"data" dictionary only has "column" value for the current column as against to the current "row". I am trying to compare tow dates here. Can you please suggest on how to go about it?
Controller Snippet in C#:
.Field(new Field("Session.SessionStart")
.Validator(Validation.DateFormat(
"h:mm tt",
new ValidationOpts { Message = "Please enter time in the format h:mm A" }
))
.GetFormatter(Format.DateTime("hh:mm", "h:mm tt"))
.SetFormatter(Format.DateTime("h:mm tt", "hh:mm"))
)
.Field(new Field("Session.SessionEnd")
.Validator(Validation.DateFormat(
"h:mm tt",
new ValidationOpts { Message = "Please enter time in the format h:mm A" }
))
.GetFormatter(Format.DateTime("hh:mm", "h:mm tt"))
.SetFormatter(Format.DateTime("h:mm tt", "hh:mm"))
.Validator((val,data,opts) => DateTime.Compare((DateTime)val,(DateTime)(data["Session"]["SessionStart"])) == 0 ? "false" : null)
Headers in the browser developer tools:
action:edit
data[4][Session][SessionEnd]:1:58 AM
reference documents:
https://datatables.net/forums/discussion/33753/cross-field-validation-how-to-do-it-in-datatables-editor-two-examples
https://editor.datatables.net/manual/net/validation (#Custom validators Section)
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
↧
How can I reset my jquery datatable when I filter the associated jquery donut chart?
I have a datatable with a donut chart. When I click a section I want to reset the pagination of the table.
$("#myForm").submit(function(e) {
table.fnPageChange(0);
table.fnReloadAjax();
return false;
});
Something like this may work?
↧
DT Searching for multiple values in a column
I was trying to use the column().search() method to search a column for some values, but I wanted to search for multiple values.
I know it takes regex, so I could just do something like table.column(1).search( new RegExp( '(' + values.join('|') + ')' ) ), but I was trying to avoid that. But if thats the only solution, then thats fine
↧
Sort Not working when adding rows to table.
Hey, so i'm having an issue when it comes to sorting. I'm adding my rows into the table dynamically using the add.row().
However, the rows inserted are not sorting accordingly. I believe i'm setting up the data-order properly.
An example of what I have
var rownum = mytable.row.add(result).node();
$(rownum).find('td').eq(0).css('width','50px');
$(rownum).find('td').eq(2).attr('data-order', a[i].data1);
$(rownum).find('td').eq(3).attr('data-order', a[i].datat2);
$(rownum).find('td').eq(4).attr('data-order', a[i].data3);
$(rownum).find('td').eq(5).attr('data-order', a[i].data4);
$(rownum).find('td').eq(6).attr('data-order', a[i].data5);
Any advice would be great.
Thank you!
↧