I have a quandary that I can't seem to resolve - any pointers would be hugely welcome.
When the tab link is clicked, the new tab opens, but the datatable within tabs 2 & 3 doesn't resize - tab1 is always ok.
I'm using datatables within boostrap tabs and the following code, which I've used on other sites and they work. This site i'm working in however, isn't playing ball - wondering if it's because it's BS5 causing a conflict ??
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function (e) {
$.fn.dataTable.tables({ visible: true})
.columns.adjust()
.responsive.recalc();
});
I've also tried the code provided by Datatables, and that doesn't seem to work either - in this case. https://datatables.net/examples/api/tabs_and_scrolling.html
The Problem
I think the line
$.fn.dataTable.tables({ visible: true})
is not valid DataTables syntax - and I would expect it to generate an error in your browser's console:
$.fn.dataTable.tables(...).columns is undefined
Suggested Solutions
You can re-write your approach in a couple of different ways (assuming you are using a recent version of DataTables).
The first two examples assume all your tables use a common CSS class name in their HTML <table> tags. In my case, I am using this:
<table id="example2" class="display dataTable cell-border" style="width:100%">
And therefore I will use the .dataTable class selector in the following examples.
Example One
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$.fn.dataTable.Api('.dataTable')
.columns.adjust()
.responsive.recalc();
} );
Example Two
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$('.dataTable').DataTable()
.columns.adjust()
.responsive.recalc();
} );
Note that the above example uses DataTable() with a capital "D".
Example Three
The above examples operate on all data tables in the page - it's just that the only one which is affected is the one you see in the selected tab.
If you want to explicitly target only one table in your tab event, you can use the approach shown in this question:
How to make DataTable responsive in Bootstrap tabs
In that answer, the approach retrieves the specific table name from a unique attribute value 'data-bs-target' defined for each tab, for example:
data-bs-target="#home"
See the API reference page for details.
Related
i need to display tooltips for my table cells. Are there any plugins for that purposes?
Thanks in advance!
You should be able to use any table and tooltip plugins you want - you just need to trigger the tooltips correctly depending on how you are initializing and updating the table.
For example, if you use jQuery DataTables (which I assume you are looking at given the tag you gave your question) with the jQuery UI tooltip widget you could simply initialize the tooltips once you've initialized the table. If you have the tooltip data already in the table, it could be as simple as:
$('#mytable').dataTable().tooltip();
If you have a more complex table that gets updated (such as using deferred rendering for a giant dataset), then you'd probably need to tie into the row creation callback to get the tooltips on any new rows by doing something like this in the init options:
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('.tooltip', nRow).tooltip()
}
I am using the DataTables plugin for jQuery but keep getting the following error when I attempt to use the fnDestroy method:
Undefined
I have tried using all of the following variants:
1)
$('#data').dataTable().fnDestroy();
2)
var dt = $('#data').dataTable();
dt.fnDestroy();
3)
var data = document.getElementById('data');
data.fnDestroy();
The 'data' object exists - The HTML is as follows:
<div class="resultset">
<table class="display" id="data">
<tbody>
</tbody>
</table>
</div>
The DataTable is built with Javascript (not shown here), but the base object is hard-coded.
The API documentation shows that the second method should work:
$(document).ready(function() {
// This example is fairly pointless in reality, but shows how fnDestroy can be used
var oTable = $('#example').dataTable();
oTable.fnDestroy();
} );
EDIT
The DataTable displays fine and otherwise works well. The issue arises when I attempt to execute this function.
It seems to be the difference between...
_table = jQuery('table#fp-table-table').dataTable(); // .fnDestroy() works
and
_table = jQuery('table#fp-table-table').DataTable(); // .fnDestroy() doesn't work
DataTable seems to be for API calls back into the object and dataTable seems to be the intialisation method.
In my project I had changed the initialisation to use DataTable instead of dataTable to perform a filtering task. After this my AJAX reloads would throw the 'undefined' error, so I changed it back... i esta.
If you go to http://www.datatables.net/manual/installation and scroll towards the bottom you will see the following:
"Upgrade note:
If you are upgrading from DataTables 1.9 or earlier, you might notice that a capital D is used to initialise the DataTable here. $().DataTable() returns a DataTables API instance, while $().dataTable() will also initialise a DataTable, but returns a jQuery object.
Please refer to the API manual for further information.
Are you sure you are running your fnDestroy within document.ready?
Maybe you are getting the undefined error because the dom is not correctly loaded yet ?
It could also mean your table is incorrect, but I would have to be able to look at that to be sure.
Take a look at this fiddle, which uses your second option, and runs perfectly: http://jsfiddle.net/timsommer/m5sZU/2/
From the datables 1.10 manual:
It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQueryJS object. An api() method is added to the jQuery object so you can easily access the API, but the jQuery object can be useful for manipulating the table node, as you would with any other jQuery instance (such as using addClass(), etc.).
So you can use DataTable() but then you need to use _table.api().fnDestroy(); it seems.
You can try
table.destroy()
This works in my case
I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list
I'm using the new MVC3 WebGrid. So far so good, just having issues styling/formatting the column headers. The best I've got is a workaround that applies the same css class from the first row of the WebGrid to the table header.
var headerCells = $("#grid tr:eq(0) th");
var firstRowCells = $("#grid tr:eq(1) td");
$.each(firstRowCells, function (index, value) {
$(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});
This example obviously lacks a check to make sure there are rows or indeed the specifed element id, but it applies the css class from the first row to the header row meaning you can style independently of each other.
td.my-column-style { width:100px }
th.my-column-style { text-align:right;}
Is there a built in way of styling the column header elements (not just using the headerStyle property)?
No, as of now there is no built-in way to style the header cells independently, only the header row via the headerStyle property.
I think your workaround is good enough.
I know this is an old question, but this may be useful to viewers who stumble across it.
The :nth-child css pseudo selector is your friend, if you don't want to rely on javascript to copy the classes. It is easy to add a class to your webgrid using the tableStyle property, and then you can style the individual headers with the following bit of css:
.webgridclass tr th:nth-child(1){
background:#ff0;
}
.webgridclass tr th:nth-child(2){
background:#f60;
}
Unfortunately, this is not supported in IE8 and earlier IE, but it does have full support in all proper browsers (newer than FF3).
We can do this using of Javascript code as below.
JsFiddle Example
$("table tr th:nth-child(n)").addClass("col-md-1");
I am encountering a problem of jquery live function not consistently working for me (or that what I think).
I have the same html form which is used for both adding new comment and editing an existing one; this form is propagated using a php code at the server side through a GET call. The two forms are displayed in two different tabs (tab1: adding a comment, tab2: listing the comments; tab3: edit a comment selected in tab2) based on the tab selection. The "Add comment" form appears as the main content of the tab1; however, the 'edit' form appears based on the selection of the comment that needs to be edit in tab2, so let assume that the "edit comment" form appears as tab3. The below code work perfectly for tab1 when the form is the main content of that tab; but it doesn't work consistently when it is the main content of tab3, which is showed based on which comment need to be edit in tab2.
$("input.sample_radio").live('change',function(){
if ($(this).val() == 'no')
$('#sample_table').hide();
else if ($(this).val() == 'yes')
$('#sample_table').show();
return false;
});
If you can provide me with some thoughts, it would be appreciated. My observations were:
I used $("input[name='sample_radio']") but this didn't work for the form of tab3 because it always end up at the form of tab1
by using $("input.sample_radio") I assumed all the classes of type 'sample_radio' would work, but it not working either.
live is supposed to bind events to the new elements added to the DOM tree after jquery calls, but it seems this is not the case for me.
Thanks
Following the suggestion of Mark Schultheiss
Look into .delegate() which was presented specifically to address this by allowing you to specify a context.
I managed to solve this issue by binding the event to the selected parents (tab1 and tab3) of the radio buttons and then filtering based on the selector which is here is the name of the radio button element and as shown below:
$('#tab1,#tab3').delegate('input[name="policy_radio"]','change',function(){
if ($(this).val() == 'no')
$('.policy_table').hide();
else if ($(this).val() == 'yes')
$('.policy_table').show();
return false;
});
Thanks for pointing me to this point.
By using .live you have ran into one of it's challenges. When you change the selection context you prevent it from working properly.
Look into .delegate() which was presented specifically to address this by allowing you to specify a context.
See this post for some notes on delegate from Brandon Aaron: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
And see this nice one on context: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery