Please refer to my test case
https://jsfiddle.net/1c3Lmace/13/
This is my code
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
"fnPreDrawCallback": function( oSettings ) {
alert('pre');
},
"fnDrawCallback" : function() {
alert('+++++');
}
} );
} );
When you go to Show/Hide Columns and click on any column item you will see that each preDrawCallBack and drawCallback event fires twice.
Does anyone having any idea why it happens.
I want to show a loader before data loads and hide it and when data is successfully loaded. Any help is appreciated
Thanks
Indeed the events are fired twice but only when sorted column visibility is being toggled.
I see no point in showing loading indicator for client-side processing, column visibility changes occur very fast. For server-side processing, there is processing option already available.
You can do something like this. But I had to put an alert() because columns are toggled very fast and Processing... message disappears quickly.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
processing: true,
drawCallback : function() {
$('.dataTables_processing', $('#example').DataTable().table().container()).hide();
}
} );
} );
$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
$('.dataTables_processing', $('#example').DataTable().table().container()).show();
alert('Column visibility is toggled');
} );
See this jsFiddle for code and demonstration.
Related
I have a Webix datatable
webix.ui({
view:"datatable", id:"dtable", data:grid_data,
columns:[
{id:"title", adjust:true},
{id:"more", template:"<icon class='webix_icon fa-cog'></icon>"}
]
});
with the attached context menu
webix.ui({
view:"contextmenu",
data:["More info", "Edit", "Delete record"],
click:function(id, context){
webix.message(id+" on row "+this.getContext().id);
}
}).attachTo( $$("dtable") );
Here's my snippet
Wondering is it possible to show the context menu on only on the icon? Any ideas? Thanks.
In the Webix documentation you'll find onBeforeContextMenu event. Using it, you can check the column id and prevent showing of the context menu on other columns:
on:{
onBeforeContextMenu:function(id, e, node){
if (id.column !== "more")
return false;
}
}
In your snippet, the column contains only icons, so this solution can suit your needs. As an addition, I suggest you prevent the browser context on the datatable via
webix.event($$("dtable").$view, "contextmenu", function(e){
webix.html.preventEvent(e);
});
http://webix.com/snippet/509f218d
Following is the code found in data table website in order to remove the paging.
$(document).ready(function() {
$('#example').DataTable( {
"paging": false
} );
} );
My question is how to enable and disable paging on button click.
as when i call DataTable function second time to same table. It shows error that data table is already initiated and im calling it second time.
simply recreate the dataTable using destroy: true and paging:
I wanted to show only the first 10 rows of the table, but still be able to sort the whole table. But I also wanted the ability to click a link and show the whole table.
Here's what I did: (my table is "ka_ad")
First, turn on paging
table_ad = $('#ka_ad').DataTable({
paging: true,
});
Second (optional: I didn't want to display the datatable pagination links and element, so I hid them with css
#ka_ad_length{display: none;}
#ka_ad_paginate{display: none;}
Lastly, toggle the bPaginate setting (I have a button with an ID of "test"):
$('#test').click( function () {
//console.log(mytable.settings()[0]['oFeatures']['bPaginate'] );
if(table_ad.settings()[0]['oFeatures']['bPaginate'] == false)
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = true;
$('#test').html('Show All Rows');
}
else
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = false;
$('#test').html('Show Fewer Rows');
}
table_ad.draw();
});
Try like this.
var oTable;
$(document).ready(function() {
oTable = $('#example').DataTable( {
"paging": false
} );
$('.btn').click( function () {
oTable.paging= false;
oTable.fnDraw();
});
} );
try this:(but i don't guarantee, because, i haven't tested)
var oTable = $('#example').dataTable();
// get settings object after table is initialized
var oSettings = oTable.fnSettings();
oSettings.paging = false;
$(".button").click(function(){
oSettings.paging = !oSettings.paging;
});
https://www.datatables.net/forums/discussion/16373/enable-disable-features-after-initializing-the-table
I have several data listed on the jquery dataTable and its done pagination by the DataTable plugins default. I want to get the current page of the dataTable while processing the data and set that page into active after the action is processed and reload the data.
See this fiddle. You can see how to get the current pages. In the JSFiddle you can try refresh browser. Example let say the current page now is 3. When you refresh the browser, you still in page 3.
To solve your problem want to go back to the last page when editing or deleting row, u must use this option to make jquery datatable remember where the last page. Jquery Datatable will save the state of a table (its paging position, ordering state etc). The state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. See this link to read more detail about it. State saving
"bStateSave": true
JSFiddle Link
Fiddle Demo
Javascript code
$(document).ready(function() {
var table = $('#example').DataTable({
"sPaginationType": "full_numbers",
"bStateSave": true
});
$("#example").on('page.dt', function () {
var info = table.page.info();
$('#pageInfo').html('Currently showing page ' + (info.page + 1) + ' of ' + info.pages + ' pages.');
});
} );
Use only stateSave: true
like this:
$(document).ready(function() {
$('#tableId').DataTable( {
stateSave: true
} );
})
Copied from Datatable
var table = $('#example').DataTable( {
ajax: "data.json"
} );
setInterval( function () {
table.ajax.reload( null, false ); // user paging is not reset on reload
}, 30000 );
Pass null, false on reload function to stay on that page while reloading the table. See ajax.reload() documentation for more information.
See the dataTables documentation which provides a call back function from which you can obtain the current page:
$('#example').dataTable( {
"drawCallback": function( settings ) {
var api = new $.fn.dataTable( settings );
// Output the data for the visible rows to the browser's console
// You might do something more useful with it!
console.log( api.rows( {page:'current'} ).data() );
}
});
Add this where you are initializing datatable
"drawCallback": function( settings ) {
alert ( 'You are on ssame page' );
}
It works for me :)
I have an asp.net web application that has the option to provide pseudo-realtime data about an automation machine. I am using the JQuery Datatables with an ajax datasource. I have an interval that reloads the data source every set amount of time (which updates my datatable asynchronously from the db) and then redraws the table.
I am also using the responsive plug in for the table, so the web app can be accessed well from phone sized devices. I have set this up so that it drops all of the columns but the first(primary) column and adds the other columns a child (detail) record. This is where my app breaks and my phone users loose usability. This is because whenever the table redraws detail records snaps close. Therefore if a phone user is looking at the table and has expanded the detail of a record the record will snap shut as soon as the table is redrawn.
My solution would be to capture the opened detail and then at the time of redraw re-open the detail. I believe I have captured the detail successfully but everything I have found to try to programmatically expand it has not worked.
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '#Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
If you can tell why the detail isn't expanded or a better way solution please let me know. I do have a temporary solution in place that just pauses the interval when the detail button is clicked but this makes my phone users table not update.
If you're using Datatables 1.9 and earlier use fnDrawCallback().
If you're using Datatables 1.10+ use drawCallback().
Both of these callbacks go in your datatables initializer and can take your row detail opening code.
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );
So I have this gridview:
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'symptoms-grid',
'selectableRows'=>1, //ability to select one symptom at a time
'dataProvider'=>$model->search(),
'htmlOptions'=>array('id'=>'symptomsSearchgrid'),
'columns'=>array(
'symptomCode',
'title',
'inclusions',
'exclusions',
'symptomCategory',
),
)); ?>
And this javascript....script:
Yii::app()->clientScript->registerScript('search', "
$( document ).ready(function() {
$('#symptomSelectDiv').hide();
$('#categorySelectDropDown').change(function(){
$('#symptomSelectDiv').show();
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
});
");
My problem is that I can only either get the
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
function to work or the:
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
one, and it seems quite random too. Basically in order to get the other function to "start working" I have to change the id (either the grid id or the DOM id) of one function to something different for the other function to work (while the other doesn't).
So let's say at first the update function works and the click function doesn't. Then I change the ID of update to something wrong and click works. Then I change the id of update back to the correct one, but it still doesn't work, yet click works. THen I change click to a wrong id and update starts working correctly. But again, if I change click to the correct id it doesn't work.....
Any ideas what I'm doing wrong?
I think your issue is that your are giving your grid two id's one when creating it and one in htmloption.