I'm using jquery datatables(angular datatables) with server side processing, the message 'processing' is above the table. I can change the position through sDOM (lfrtip), but is it possible to make it inside the datatable(put p into t)?
Yes...there are a few ways you can do this. I like to use a "loading gif". So, your HTML looks like this:
<table id="main_index">
<img id="loading_gif" src="images/ajax-loader.gif"> <!--this is your loading image or div-->
</table>
Then you want this .gif to be hidden once the table loads. You use datatables callback function for this. For example:
$("#main_compare").DataTable({
//all of your other datatables configuration followed by a comma then...
"drawCallback": function(settings, json) {
$('#loading_gif').hide(); //hides the loading image once table is loaded
//do anything else you want to have happen only once the table is loaded
}
})
EDIT
Based on your comment, I think this is what you're looking for.
If you want a message to appear within the area of the table while it's loading, you use this structure:
<table id="main_index">
<div id="table_processing">Whatever text you want</div>
</table>
You can then hide this using the code from my original answer to hide this div when the table loads.
The processing option needs to be set to true
and
In the sDom option the letter r was needed.
var options = {
"sDom": 'prtp',
"processing": true,
"serverSide": true,
"ajax": "/path/to/my/ajax.php"
}
var oTable = $('.datatables').dataTable(options);
Related
I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was simmilar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:
I have a script (with required items to insert button):
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!", "dijit/form/Button", "dijit/_WidgetBase"],
function(AccordionContainer, ContentPane, Button){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
var aChild1 = new ContentPane({
title: "Date selectors",
content: "Test"
});
var aChild2 = new ContentPane({
title:"Group 2",
content:"Test"
});
var aChild3 = new ContentPane({
title:"Group 3",
content:"Test"
});
aContainer.addChild(aChild1);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
});
And my DIV is simply:
<div id="markup" style="width: 250px; height: 300px">
This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:
var btn as new Button([...]);
and place it here:
aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
but it not works. How can I build my layout in this case? Thanks in advance for help.
Problem solved. I applied declarative instead of programatic creation:
In script, I simply added this line:
require(["dojo/parser", "dijit/layout/ContentPane"]);
Then I wrote some divs like:
<div data-dojo-type="dijit/layout/ContentPane">
Some text
</div>
I found a tip (inside the code of demos) that:
content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize",
function(mb)
... so all I had to do was:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
<!-- calendar widget pane -->
<input id="calendar1" data-dojo-type="dijit.Calendar">
</div>
If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source):
https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra
You will find every fragment well described. For me, it is more useful than documentation.
I hope that by solving my problem, this solution will be helpful to someone.
I have started to implement Datatables in a project.
My Project is based on Bootstrap 3.
I have build up a package with the necessary files on the datatables download-page and created a simple datatable based on the docs. Everything works fine, but I have a problem with responsiveness. Have a look at the following screenshot:
As you see. the search-bar has problems.
The table has the following HTML:
<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0"> .......
The table has the following JS:
var table = $('#event_history').DataTable({
responsive: true,
colReorder: true,
lengthChange: true,
"order": [[ 0, "desc" ]],
});
Perhaps somebody can help me to solve this.
Thank you!
Controls in DataTables with Bootstrap styling wrap nicely when table occupies full page width, see this example.
However I think you're showing your table in a panel that doesn't occupy full page width, which prevents col- rules from being applied, as shown in this example. You can use special crafted value for dom option to configure column layout for one specific table based on your expected container sizes.
For example:
var table = $('#example').DataTable({
responsive: true,
dom:
"<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" +
"<'row'<'col-xs-12'tr>>" +
"<'row text-center'<'col-xs-12'i><'col-xs-12'p>>"
});
See this example for code and demonstration.
I have a JQuery UI tab dialog that is the detail of a Master-Detail interface. When someone selects an element in the master, the tabs all get their href's populated with URLs giving details of that selected item.
For example, see
http://www.trirand.com/blog/jqgrid/jqgrid.html and browse to Advanced->Master Detail.
But instead of updating a second grid, I'm updating the links of a jquery-ui tabs element like so:
var urls = {
0 : "/url1",
1 : "/url2",
};
jqgrid(....
onSelectRow: function(location_id) {
for (url in urls){
$('#tabs').tabs('url', url , urls[url]+location_id );
}
var selectedTab = $('#tabs').tabs("option", "selected");
$('#tabs').tabs('load', selectedTab);
}
);
$(#tabs.tabs({});
With html like:
<div id="tabs">
<ul>
<li><a id="URL1" href="blank.html">Info</a></li>
<li><a id="URL2" href="blank.html">History</a></li>
</ul>
</div>
I shouldn't have to use a blank.html dummy link. Is there something I can do (when I don't have anything selected in the master) that doesn't cause my tabs to cause a fetch and instead just be empty?
If you set the tab to be blank in your coding nothing will appear in it (obviously), but if you need to empty it on page load use this:
$(document).ready(function() {
$('#divID').empty();
});
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.
and thanks in advance for your help!
Here's my situation: I have a set of divs whose IDs have an incrementing number applied to the end of the name using PHP. Each of these divs are added dynamically with PHP (They are a series of FAQ questions with a hidden div container with the answers, that slide down when the question is clicked.) [Live Example][1]
There is no limit to the number of questions that appear on the page, because this is being used for a Wordpress theme and my client wants to add new questions as they go along.
Here's an example of the structure for each FAQ question using the PHP:
<?php var $faqnum = 0; $faqnum++; ?>
<div id="faqwrap<?php $faqnum; ?>">
<h4>What data is shared?</h4>
<div id="faqbox<?php $faqnum; ?>" class="slidebox">
<p>Data sharing is defined by the type of service:</p>
<ul class="list">
<li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li>
<li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li>
<li>Participation in a service requires the member to provide associated data<br />
</ul>
</div>
</div>
Now this is what I have currently in jQuery, and it works, but only if I add a new one every time my client wants to add a new question.
$(document).ready(function() {
$('.slidebox*').hide();
// toggles the slidebox on clicking the noted link
$("#faqwrap1 a:not(div.slidebox a)").click(function() {
$("#faqbox1.slidebox").slideToggle('normal');
$('div.slidebox:not(#faqbox1)').slideUp('normal');
return false;
});
});
I thought of maybe doing something with a declared variable, like this:
for (var x = 0; x < 100; x++;) {
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')...
}
I hope this is clear enough for you! Again, I thank you in advance. :)
The best way to handle this is to not use the IDs, but use classes for the outer element. So your PHP would be altered like this:
<?php var $faqnum = 0; $faqnum++; ?>
<div id="faqwrap<?php $faqnum; ?>" class="question">
<h4>What data is shared?</h4>
<div id="faqbox<?php $faqnum; ?>" class="slidebox">
<p>Data sharing is defined by the type of service:</p>
<ul class="list">
<li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li>
<li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li>
<li>Participation in a service requires the member to provide associated data<br />
</ul>
</div>
</div>
Your JQuery would be rewritten with the selector for the class "question".
$(document).ready(function() {
$('.slidebox*').hide();
// toggles the slidebox on clicking the noted link
$(".question a:not(div.slidebox a)").click(function() {
/* close everything first */
$('div.slidebox').slideUp('normal');
/* selects and opens the the slidebox inside the div */
$(".slidebox", this).slideToggle('normal');
return false;
});
});
This will get you the effect you are looking for. The key differences in the JQuery is the way you get the slidebox inside the question that got clicked. I'm using the scoped selection $(".slidebox", this) to get just the slidebox inside the clicked ".question" element.
The subtle visual difference is that the slideUp() happens before the slideToggle(). This will essentially close any open queries before it opens the desired one. If you keep your animations fast, this will be more than fine. The advantage of this approach is that you don't have to worry about the count of questions on a page, and the selectors are most likely more optimized than the for loop.
Edit
I adjusted the PHP code to use a class for "slidetoggle" instead of an id. It's technically an HTML error to have multiple IDs that are the same. It can throw off some assistive technologies for people with dissabilities. I'm assuming that section of code was repeated several times on the page.
Without changing your current markup, this would work:
// toggles the slidebox on clicking the noted link
$("div[id=^faqwrap]").each(function () {
var $faqwrap= $(this);
$faqwrap.find("h4 > a").click(function () {
var $currentSlidebox = $faqwrap.children(".slidebox");
$currentSlidebox.slideToggle('normal');
$('div.slidebox').not($currentSlidebox).slideUp('normal');
return false;
});
});
Maybe you can find a few suggestions in the above code that help you.
Like #Berin, I'd also recommend giving a separate CSS class to the outer DIV and using that as a selector, instead of $("div[id=^faqwrap]").