Develop Reference

Show popover upon hover on an icon in a datatable

I generate my datatable in an .ashx file:
(...)
//E.g. This is how I generate an icon which I put into one of the table cells
comment = "<i class=\"fa fa-info\" id=\"popoverData\"aria-hidden=\"true\" data-placement=\"bottom\" data-original-title=\"Comments\" data-content=\"" + comments_text + "\"></i>";
(...)
var data = JsonConvert.SerializeObject(data);
var columns = JsonConvert.SerializeObject(columns);
context.Response.Write("{\"data\":" + data + ",\"columns\":" + columns + "}");
The goal is to show a bootstrap popover upon hover on the above icon. My JavaScript:
$(document).ready(function (){
//this part should generate the bootstrap popover, but it's NOT
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$('#popoverData').popover();
//console log gets activated
console.log("I am in the function");
});
getData();
});
function getData() {
$('#MyDataTableDiv').html('<table id="MyDataTable" class="display" cellspacing="0" width="100%"></table>');
$.ajax({
"url": myUrl/getData.ashx',
"success": function (json) {
json.columnDefs = [
{ targets: '_all', defaultContent: "" },
{ targets: '_all', className: 'dt-body-left' }
];
json.dom = 'Bfrtip';
json.buttons = ['print', 'csv', 'copy'];
$('#MyDataTable').dataTable(json);
},
"dataType": "json"
});
}
The javascript mouseover event gets triggered, but the popover is not working. I've tried this too:
$(document).ready(function (){
$('#popoverData').popover();
getData();
});
But in this case the popover shows up ONLY if the #popoverData element is outside the datatable.
How do I show popover upon hover on the icon?

Please modify your code.
$('#MyDataTable').on('mouseover', '#popoverData', function () {
$(this).popover('show');
});
if this not worked then try
$(document).on('mouseover', '#popoverData', function () {
$(this).popover('show');
});

checking if all radio buttons are checked in jquery datatables

I have a datatable and i would like to check if all radio buttons are checked but this works only for the first paginated page but fails to check the other pages
this is my code:
var dt = $('#newtable').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
This is what am using to check
$("input:radio").change(function() {
var all_answered = true;
dt.rows().nodes().each(function() {
if($(":radio:checked").length == 0)
{
all_answered = false;
}
})
if(all_answered==true ){
$('input[type=text]#general_comment').removeAttr("disabled");
approvebtn.removeAttr("disabled");
}else {
approvebtn.prop("disabled", "disabled");
}
});

You can bind a page event on your DataTable once the datatable is initialized, which on pagination (page change) will check what you want.
$('#newtable').bind('page', function () {
//call to check what you want.
});

Cannot change page in datatable

i've a problem with my datatable...
The problem is: I can't change the page after inizialization....
The workflow that i desire is:
A user select a radiobutton in page 3
i save the id of this radio and the curent page
i destroy datatable
when user re-enter in datatable (re-creating datatable) I wish that user would go directly to the page 2
This is my code:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
});
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
});
P.S. 2 is an example to test function :)
But i get this error in consolle:
Uncaught TypeError: oTable.fnPageChange is not a function
What can i do?
Thanks

Use stateSave, it will do exactly what you need atomatically :
var oTable = $("#id").DataTable({
stateSave : true,
...
});
Now each time the table is instantiated it will restore the settings from last session, i.e pagination, sorting, search-phrase ...

Could you try this ?
$(document).ready(function() {
var currentPaging = 1;
$('#example').DataTable( {
responsive: true
} );
var oTable = $('#example').dataTable();
$(document).on("keypress", function (e) {
oTable.fnPageChange(2);
});
$('#example').on( 'page.dt', function () {
var info = $('#example').DataTable().page.info();
var page = info.page + 1;
alert('Current paging : '+page);
currentPaging = info.page + 1;
});
$('#memorizePaging').on("click", function (e) {
alert("I'm on the page : "+currentPaging);
});
} );
I did a fiddle to show you fnPageChange works : https://jsfiddle.net/z4zgp9az/5/

It seems the "DataTable" should begins from small character "dataTable"
It should helps:
$('.js_select').click(function (e) {
var oTable = $("#id").DataTable({
......
change to:
$('.js_select').click(function (e) {
var oTable = $("#id").dataTable({
......

FixedHead in datatables doesn't work after removing pagination

When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );

I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );

Call magnificPopUp within another function

I would like to display a magnific popup within another functions onclick event. This function has a conditional statement and if false, then the pop-up should be displayed.
I have created a jsfiddle which shows what I am trying to do: http://jsfiddle.net/Lilu/heM4q/
Html:
<button class="add-wishlist"><span>Wishlist</span></button>
Jquery:
$(document).on('click', '.add-wishlist', function(e) {
var yes = "1";
if (yes == "2"){
// Add to wishlist
}else {
// Display error in popup
$.magnificPopup.open({
type: 'ajax',
alignTop: true,
mainClass: 'my-mfp-zoom-in',
removalDelay: 160,
callbacks: {
parseAjax: function(mfpResponse) {
mfpResponse.data = "<div class='modal-content'>"+"Sorry you cannot do that"+"</div>";
},
ajaxContentAdded: function() {
return this.content;
}
}
});
}
});
Any help will greatly be appreciated.

I found out that I can achieve the pop-up using inline magnific pop-up instead of ajax.
HTML:
<button class="add-wishlist"><span>Wishlist</span></button>
JQuery:
$(document).on('click', '.add-wishlist', function(e) {
var yes = "1";
if (yes == "2"){
// Add to wishlist
}else {
// Display error in popup
displayError();
}
});
function displayError() {
$.magnificPopup.open({
items: {
src: '<div class="modal-content">'
+'<p class="error">'
+'<strong>Whoops!</strong></p>'
+'<p>You cannot do that.</p></div>',
type:'inline',
},
closeBtnInside: true
});
}
Please see: http://jsfiddle.net/Lilu/heM4q/4/