Currently, a change event is not fired by default (ie by the library) when a date is selected in the datepicker popup.
The only way to achieve this is to set
opts.onChange: function() { _triggerChange(input); }
but I think that's weird because other fields do fire change events when selected.
How can I save the sort order, sort expression and any applied filters to a var / hiddenfield, of an asp:GridView with DataTables?
I'm looking for a way to pass these to my server-side logic, in order to apply the same sort and filtering to the underlying dataset, to pass the dataset elsewhere. Using ASP.NET Webforms (C#), not great at JS. Can this be done?
I am using server side processing for my tables. I have tables that have 60000+ rows with 65+ columns, so using client side is not an option for me. My end users want to pull up the tables and then use the filtering and sorting to narrow down what they are seeing. Then they want to Export All, usually still 30k - 40k rows with the 65+ columns and with the sorting in place too. I have tried a few things that I've found elsewhere and am hoping that you can help. Here's what I've tried so far:
{ extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}
This does not do what I would like. It exports only the current page (which is why I made the text for it 'Export Current Page')
I've also tried this:
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}
This simply sends the whole table to the screen instead of sending it to an excel file. Though it does pull the whole data set.
I'm sure that through the two of these I'm missing something that would allow me to Export the whole data set without sending it to the screen first.
Hello,
how I can check if a column was clicked for sorting?
I ask, because I use fnRowCallback and if user click to sort a column, every time this function is called.
I need to hook if user click column to sort and in this moment I want set a value to certain variable to use this variable in other function.
Do you have some ideas? How I can do that...
Thank you in advance guys
The page for editor.submit(success,error) states that the error callback is equivalent to the submitError event.
This is not the case, because in _submitSuccess, at some point errorCallback may be called without calling submitError.
I would prefer that submitError is also called in _submitSuccess.
I am attempting to check/uncheck a checkbox that is a column on each row. If I examine $('#grid').DataTable().rows().nodes(), this only returns the rows that are visible on the current page. Of course if I examine $('#grid').DataTable().rows(), this returns the indexes of all rows. It appears that I have to use the nodes method to actually manipulate the DOM.
Do I have to loop through all of the rows to do this?
Is there a way an easier way to check/uncheck all of the results on all pages?
Thanks.
In Editor.php in the function _remove, there is the following problem:
- When all registrations return false from preRemove, no postRemove callback is fired
- When at least one registration returns something different from false, the postRemove callback is fired for all submitted rows.
I currently use the preRemove and postRemove event together to:
- do soft delete in preRemove, ie change deleted bit in row
- renumbering of sequence numbers in postRemove, so that the rowReorder column still has the right numbers
- the client obtains these values by updating the table after the remove has succeeded, but another option would be to submit the seq values of the remaining rows and have the client update the table in the postRemove (javascript) event.
Two issues:
1. all preRemove callbacks return false, and hence no postRemove callback will be fired.
2. the soft-deleted rows will be added to the cancelled array, but the rows are cancelled, just not by the editor code.
Solutions:
1. Have preRemove return two different values, indicating 'do not delete this record' and 'I deleted the record'
2. Always call the postRemove callback for all rows, or maybe just for the deleted rows (ie, those that were removed by editor or whose preRemove returned 'I deleted the record')
Hi,
Great tool, I want to export an excel like attached copy.
is it possible in datatables?
Hello, I searched the entire forum and although I found information, I can not understand where the code is placed to focus the search box. (Sorry for my English) Here my code:
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns([1]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()).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>' )
} );
} );
}
} );
} );
Thank you.
I am unable to use arrow keys while editing a cell. The arrows key event causes the control to go out of edit mode and navigates.
Is this a limitation, if so please provide a solution.
I have 2 fields, a DateTime and a Time/Duration field, that are sorted incorrectly and I'd like to hope that there's a way to sort them according either to the original data or a reverse-transform (parse) on the display.
The date field shows date data like "Wed, Jan 4th, 9:48:01 AM", and is initialized as follows:
{ 'mData' : 'RowDateTime'
,'render' : function(rawDate) {
return moment(rawDate).format("ddd, MMM Do, h:mm:ss A");
}
},
The duration field displays a digital clock like "02:23:33", and is initialized as follows:
{ 'mData' : 'Duration'
,'render' : function(seconds) {
var duration = moment.duration(Number(seconds), "seconds");
var durst = seconds;
if( seconds > 60 * 60 )
durst = padZero(duration.hours() ) + ":" +
padZero(duration.minutes()) + ":" +
padZero(duration.seconds());
else
durst = padZero(duration.minutes()) + ":" +
padZero(duration.seconds());
return "<div id='ralign'>"+durst+"</div>";
}
Of course, the dates sort based on the first char of the day name, so Thu always comes before Wed.
The duration sorts left to right, so 7 hours (07:22:23) is sorted next to 7 minutes (07:12) and before 08:03!
How can I change these sorts in the easiest possible way? The first thing I'm going to try is add "'sType' : 'Date'" to my init.
Thanks,
Chris
I have a web service that was build to serve the data that my table requires. It's signature is https://host/app/{arg1}?arg2&arg3.
None of the examples that I see in the ajax|Option docs show how to use a RESTful URL like this. The {arg1} path argument needs to come from a local API call. The arg2 and arg3 arguments can be null on first load, but should be made available for the user to adjust what data is being viewed.
Should I not try to use the ajax: option and instead use data: and populate with a JS function that returns the JSON from the WS?
I'm guessing there's no built-in API to create filters that will re-query the data source, so I'll have to create UI that looks like it belongs with the data. My biggest question is: how do I get the path argument into the ajax path at run time?
I am assuming that it's probably a pretty common use-case.
{
"response_code": 200,
"route": [
{
"no": 1,
},
{
"no": 2,
},
{
"no": 3,
}
],
"train": {
"number": "152526",
"days": [
{
"day-code12": "kak",
"ru2s": "Nam"
},
{
"day-code12": "kak",
"ru2s": "Nam"
},
"classes": [
{
"class-code": "AB"
},
{
"class-code": "CC"
},
]
}
}
$(document).ready(function () {
$('#btn1').on(click, function () {
getData();
});
});
function getData() {
var n = document.getElementById("number").value;
var url = "url";
// var url = "http://drive.google.com/file/d/0B3WFeMArz8bUSDFTbnBOMlFVd2M/view?usp=sharing ";
$.ajax({
url:url,
async: false,
dataType: 'json',
success: function (data) {
//alert(JSON.stringify(data));
// var trainName = data.train.name;
// $('#trainName').empty();
// $('#trainName').append(trainName);
displayInfo(data);
},
error: function (){
alert("fail in getting data");
}
});
}
function displayInfo(data) {
var table = $('#trainRoute').dataTable({
"aaData": data.train,
"info": false,
"search": false,
"sort": false,
'iDisplayLength': 100,
'bDestroy': true,
"columns": [
{ "mData": "number" },
]
});
}
when I upload file uploads fine but I then get exception "Unknown file table name: files". Here is js configuration:
display: function ( file_id ) {
return '<img src="'+oTable.file( 'files', file_id ).web_path+'"/>';
},
oTable is my DataTable object.
Here is JSON response of upload:
{"success":"true","message":"Records: 1","data":[{"id":"4541","friendly_name":"test 23","payout":"1","creatives":"1"}],"files":{"files":{"1339":{"id":"1339","filename":"Screen Shot 2016-10-17 at 2.14.44 PM.png","filesize":99636,"system_path":"\/var\/www\/html\/uploads\/Screen Shot 2016-10-17 at 2.14.44 PM.png","web_path":"https:\/\/d19wao8xekn0f6.cloudfront.net\/imageglobs\/mob-1339-1483651224.png"}}},"upload":{"id":"1339"}}
Why am I getting this error?
Hello Community,
So basically, I need to filter my data table by column, using column().search(), by allowing the user to select a value from a drop down list. Once selected, the selected option is thrown in as the value in .column().search(val, false, true, true). The problem that we are running into is that the column in question has multiple values, separated by line breaks. When performing the search, if the user selects (by example) "C" but there are two potential values ("C" and "C++"), the search result yields any row whose column contains "C" OR "C++" when the desired result is to only see those rows with "C".
Again, the column might look like this:
C
C++
VB
Java
JavaScript
I expect to only get rows with C if I select "C" from the drop-down list; likewise, I expect to only get rows with "Java" if I select "Java" (and not Java and JavaScript.
Any suggestions?
Hi ,
I have cell type "checkbox" , if Checked then Value will be "Y" else "N" .
If checkbox select or unselect , how to submit and set value Y or N in tables.
Regards.
Sunil
I think this is related to using Turbolinks, but I haven't been able to get to the bottom of what's happening.
I'm giving all tables I'd like to display as DataTables the class "enable-data-table," then initializing such tables on the turbolinks:load event.
$(document).on "turbolinks:load", ->
$('table.enable-data-table')
.DataTable()
This works great when I'm clicking to navigate. But when I use the browser forward or back buttons, I get a DataTables wrapper div nested in another DataTables wrapper div. The table is only displayed once, but the search box and pagination are displayed twice.
The html produced looks much like this:
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
<div class="dataTables_length" id="DataTables_Table_0_length">
<label>Show
<select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="">
<option value="25">25</option>
<option value="100">100</option>
<option value="250">250</option>
</select>
entries
</label>
</div>
<div id="DataTables_Table_0_filter" class="dataTables_filter">
<label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label>
</div>
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
<div class="dataTables_length" id="DataTables_Table_0_length">
*Identical to DataTables_Table_0_length above*
</div>
<table class="enable-data-table dataTable no-footer" data-order="[[ 0, "desc" ]]" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
*Thead, tbody content here*
</table>
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 20 of 20 entries
</div>
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
*Pagination here*
</div>
</div>
Any idea how to display the header & footer only once? Thanks!
Chris
Does the multiple tables, illustrated in the following samples, work with the Editor?
(Multiple tables): https://datatables.net/examples/basic_init/multiple_tables.html
(Scrolling and Bootstrap tabs): https://datatables.net/examples/api/tabs_and_scrolling.html
I have a large database table (both in terms of the number of records and the number of columns) and currently planning how to split this for user editing. Any tip or sharing of experience is highly appreciated.
I have a gridview inside an updatepanel. I implemented the Datatable.js plugin to the grid. Then, I found the option to keep the scroll stateSave: true, so that when the user selects a record the system calls the server (causing a postbak) and the scroll is kept in the same position. But it does not work.
Here is my .aspx file code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- grid de empleados -->
<div class="bs-docs-section">
<asp:GridView ID="grdEmployees" runat="server"
OnRowCreated="grdEmployees_RowCreated" OnSelectedIndexChanged="grdEmployees_SelectedIndexChanged" AutoGenerateColumns="False"
DataKeyNames="IdEmployee" OnRowCommand="grdEmployees_RowCommand" OnPreRender="grdEmployees_PreRender"
BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" CssClass="responsive small">
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="NumberOfRecord" HeaderText="No." ReadOnly="True" SortExpression="NumberOfRecord"
meta:resourcekey="BoundFieldResource1"></asp:BoundField>
<asp:BoundField DataField="EmployeeName" HeaderText="EMPLEADO" ReadOnly="True" SortExpression="EmployeeName"
meta:resourcekey="BoundFieldResource3"></asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnApproveEmployee" runat="server" CausesValidation="False"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="ApproveEmployee"
CssClass="glyphicon glyphicon-share-alt" ImageUrl="../images/icons/accept.png" Style="border-width: 0px; width: 20px;" ToolTip="Approve" />
<ajaxToolkit:ConfirmButtonExtender ID="btnApproveEmployee_ConfirmButtonExtender" runat="server"
ConfirmText="¿Está seguro que desea aprobar el registro?" Enabled="True" TargetControlID="btnApproveEmployee">
</ajaxToolkit:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<script lang="JavaScript" type="text/javascript">
function BindControlEvents() {
//jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
//Your code would replace the following line:
$('#ctl00_SheetContentPlaceHolder_grdEmployees').DataTable(
{
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"scroller": true,
"stateSave": true
}
);
//$('div.dataTables_filter input').focus();
}
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
</script>
I have an Angular Datatable and I am using jQuery _ColumnFilterWidgets.js _ plugin for filtering. I am able to set all multiple filters on my screen but I am having difficulties adding a "reset filter" link which resets all filters and dataset in the datatable.
I am using the ColumnFilterWidgets.js Version: 1.0.2..
Here is my JS code.
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('iDisplayLength', 25)
.withOption('fnDrawCallback',function(oSettings){$(oSettings.nTHead).hide();SpinnerService.hide();})~~~~
.withLanguage({"sEmptyTable":"No quotes available"})
.withOption("sPaginationType",'full_numbers')
.withOption('sDom', 'W<"clear">lrtip')
.withOption("aoColumns",[
/0 */ {"bVisible":false},
/1/ {"bVisible":false},
/2 / {"bVisible":false},
/3/ {"bVisible":false},
/4 / {"bVisible":false},
/5 / {"bVisible":false},
/5 / {"bVisible":false},
/6 / {"bVisible":true},
/7/ {"bVisible":false},
/8/ {"bVisible":false},
/9 / {"bVisible":false},
/10 / {"bVisible":false},
])
.withOption("oColumnFilterWidgets",{
"aiExclude":[7,8,9,10,11],
"sSeparator": "\s/+\s*",
"bGroupTerms": false,
});
I hope I have proivided the enough explanation. Any help is appreciated. Thanks 