I'm new to learn DataTable and I want to create manual customized in html of my table.
I know how to add elements in JS but how can I add buttons and search in HTML in manually same place like can I add in JS by DataTable and additionally I want that they would work in same way like they can be make in JS.
buttons: [
'pdf',
'pageLength',
'colvis',
/*{
text: 'Add',
name: 'add'
},*/
{
extend: 'selected',
text: 'Edit',
name: 'Edit'
},
{
extend: 'selected',
text: 'Delete',
name: 'delete'
},
]
How can i make this buttons in html with same actions like in specifications and place in DataTable.
DataTable provides an API you can tap into to add your own custom search fields/filtering
$.fn.dataTable.ext.search
A full example is available here: https://datatables.net/examples/plug-ins/range_filtering.html
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
});
$(document).ready(function() {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup( function() {
table.draw();
} );
} );
Related
I have code that are giving three fields for the select filter, but i want on onr filed datepicker insted of all dates.
<script>
// to show the pages till 50
$(document).ready(function() {
$('#example').DataTable( {
dom: 'lBfrtip',
lengthMenu : [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
$(document).ready(function() {
var table = $('#example').DataTable();
var indexOfMyCol = 1 ;
var indexOfMyCol1 = 2 ;
$("#example tfoot th").each( function ( i ) {
if(i === indexOfMyCol || i === indexOfMyCol1 ){
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
}
} );
} );
</script>
How i can put datepicker insted of all selected dates.
I'm trying to use a plane seat map generator. What it does is really simple. You insert the passengers for first, business and economy on html inputs. And automatically a chart should appear. This work is perform by javascript. I'm trying to run it but something is going wrong. It just does not work. It shows the table where you should put the inputs and a number 7 under it. I guess that's happening because I am missing some javascript. When you fill the input nothing happens.
To make it easier I put the code on jsfiddle. http://jsfiddle.net/g4kzo4fo/
Because I have to paste code here you have my javascript. I think the problem is somewhere here:
makeRequest(request, id, false);
$('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
$('#'+id).dialog('open');
}
var AircraftConfigCheck = {
capacity : 200,
business : 0,
economy: 0,
first: 0,
businessFree : 0,
economyFree : 0,
firstFree: 0,
total : function() {
return (parseInt(this.business) || 0) * 2 + (parseInt(this.economy) || 0) + (parseInt(this.first) || 0) * 4;
},
checkBusiness : function() {
if( this.total() > this.capacity ) {
this.business = Math.floor( ( this.capacity - this.economy - this.first * 4 ) / 2 );
}
},
checkEconomy : function() {
if( this.total() > this.capacity ) {
this.economy = this.capacity - this.business * 2 - this.first * 4;
}
},
checkFirst : function() {
if( this.total() > this.capacity ) {
this.first = Math.floor( ( this.capacity - this.economy - this.business * 2 ) / 4 );
}
},
updateCapacity : function() {
this.businessFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 2 ) );
this.firstFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 4 ) );
this.economyFree = Math.max( 0, this.capacity - this.total() );
},
setValues : function() {
$("#business").val( this.business );
$("#economy").val( this.economy );
$("#first").val( this.first );
$("#businessFree").html( this.businessFree );
$("#economyFree").html( this.economyFree );
$("#firstFree").html( this.firstFree );
/*$("#first").val( this.total() ); */
this.render();
},
render : function() {
makeRequest('http://www.fsairlines.net/crewcenter/aircraft_config_ajax.php5?max_pax='+this.capacity+
'&first_seats='+this.first+
'&business_seats='+this.business+
'&economy_seats='+this.economy,
'aircraft',
true
);
}
}
$(function() {
$(".seatInput").keyup(function() {
switch( $(this).attr("id") ) {
case "economy":
AircraftConfigCheck.economy = $("#economy").val();
AircraftConfigCheck.checkEconomy();
AircraftConfigCheck.updateCapacity();
AircraftConfigCheck.setValues();
break;
case "business":
AircraftConfigCheck.business = $("#business").val();
AircraftConfigCheck.checkBusiness();
AircraftConfigCheck.updateCapacity();
AircraftConfigCheck.setValues();
break;
case "first":
AircraftConfigCheck.first = $("#first").val();
AircraftConfigCheck.checkFirst();
AircraftConfigCheck.updateCapacity();
AircraftConfigCheck.setValues();
break;
}
});
});
Thanks in advance!
LASTEST UPDATE: http://jsfiddle.net/g4kzo4fo/4/
You have quite a few syntax errors in your code which is why it isn't running.
This part of the code doesn't make any sense:
makeRequest(request, id, false);
$('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
$('#'+id).dialog('open');
}
The makeRequest() function doesn't exist so you can't call it. And, there's an extraneous } at the end of this block.
Then, later inside the render function, you try to call makeRequest() again, but it doesn't exist.
The very first thing you should do when running any Javascript code that you've just written is to check the error console or debug console in the browser for errors. Then, anytime that something isn't working properly check the console again. Then, when you're testing your code, check the error console again.
I am using a javascript to set the height of divs to make sure that the each row of divs in a grid has the same height
The divs are each setup as:
<div class="col-xs-12 col-sm-6 col-md-4">
So that on different size devices they show as either 3 column, 2 column or a single column
My javascript is as follows:
function fitRows( $container, options ) {
var cols = options.numColumns,
$els = $container.children(),
maxH = 0, j,
doSize;
doSize = ( $container.width() != $els.outerWidth(true) );
$els.each(function( i, p ) {
var $p = $( p ), h;
$p.css( 'min-height', '' );
if ( !doSize ) return;
h = $p.outerHeight( true );
if ( i % 3 == cols - 1 ) {
for ( j=cols;j;j--) {
$p.css( 'min-height', maxH );
$p = $p.prev();
}
maxH = 0;
} else {
maxH = Math.max( h, maxH );
}
});
}
$(function() {
var opts = {
numColumns: 3
};
fitRows( $( '.tiles' ), opts );
$( window ).on( 'resize', function() {
fitRows( $( '.tiles' ), opts );
});
$( window ).on( 'load', function() {
fitRows( $( '.tiles' ), opts );
});
});
This works perfectly when either 3 columns or 1 column is shown. Is there anyway to detect when 2 columns are being display and change the javascript accordingly
In the end I went with an if statement based on the size of the window to workout the number of columns
if ($(window).width() >= 992 ){
$columns = 3;
}
else if ($(window).width() >= 768 ){
$columns = 2;
}
else {
$columns = 1;
}
var opts = {
numColumns: $columns
};
and then replaced i % 3 with i % cols
You could use a MediaQueryList, which is supported by modern browsers. A polyfill is available for older browsers.
Usage
if(window.matchMedia("(min-width:480px)").matches) //do something
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries
Javascript could "know" which columns we're positioned on the next row in two ways:
Use media-query-like javascript to determine when the wrapping occurs. Modernizr is great for this.
Check the offset.top of each column and compare. If they're next to each other the values will match. Any column at a different offset will obviously not be on the same row
It's a lot better/cleaner/easier to read than trying to judge based on element widths, etc.
However, you may want to look into display: table/table-cell for the columns and their parent, because that will give you equal heights as well.
I'm not fully sure I know what you're counting but I assume that you have columns that stop floating next to each other for smaller devices.
I am getting my position using:
this.fnGetPosition = function( nNode )
{
var oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );
var sNodeName = nNode.nodeName.toUpperCase();
if ( sNodeName == "TR" )
{
return _fnNodeToDataIndex(oSettings, nNode);
}
else if ( sNodeName == "TD" || sNodeName == "TH" )
{
var iDataIndex = _fnNodeToDataIndex( oSettings, nNode.parentNode );
var iColumnIndex = _fnNodeToColumnIndex( oSettings, iDataIndex, nNode );
return [ iDataIndex, _fnColumnIndexToVisible(oSettings, iColumnIndex ), iColumnIndex ];
}
return null;
};
If I click into row 0, iDataIndex contains 0 and iColumnIndex contains whatever column I clicked in. But if I add a new row, lets say row 9 and then I click into row 0, iDataIndex still holds 9 instead of 0 and iColumnIndex returns -1. I have to turn bServerSide off when adding a new row because if I don't, clicking the add new row button will not add a blank row, but make an ajax call. Once I add the row, I turn bServerSide back on.
fnNodeToDataIndex looks like this:
function _fnNodeToDataIndex( oSettings, n )
{
return (n._DT_RowIndex!==undefined) ? n._DT_RowIndex : null;
}
fnNodeToColumnIndex looks like this:
function _fnNodeToColumnIndex( oSettings, iRow, n )
{
var anCells = _fnGetTdNodes( oSettings, iRow );
for ( var i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
if ( anCells[i] === n )
{
return i;
}
}
return -1;
}
This is the function that gets called when I want to add the new row:
/* Add single row and display */
$.fn.dataTableExt.oApi.fnAddDataAndDisplay = function(oSettings, aData) {
/* Add the data */
var iAdded = this.oApi._fnAddData(oSettings, aData);
var nAdded = oSettings.aoData[iAdded].nTr;
/* Need to re-filter and re-sort the table to get positioning correct, not perfect
* as this will actually redraw the table on screen, but the update should be so fast (and
* possibly not alter what is already on display) that the user will not notice
*/
this.oApi._fnReDraw(oSettings);
/* Find it's position in the table */
var iPos = iAdded;
/* Get starting point, taking account of paging */
if (iPos >= 0) {
oSettings._iDisplayStart = (Math.floor(iPos / oSettings._iDisplayLength)) * oSettings._iDisplayLength;
this.oApi._fnCalculateEnd(oSettings);
}
this.oApi._fnDraw(oSettings);
return {
"nTr": nAdded,
"iPos": iAdded
};
};
I have stuck some where while modifying THIS slider.
Here Thumbnail & main display Image have one to one relationship i.e by clicking on 1 thumbnail, It shows a single Image & then it slides to the next thumbnail & displays its associated image & so on.
Now, I want to modify this slider in such a way that one thumbnail should be assiciated / linked with multiple Images i.e one thumbnail to many main display images relationship (one –to-many)
i.e by clicking on “Bedroom thumbnail” (As shown in attached image .. SCREENSHOT ) , It should only display & slide 5 (or n) number of Images related to this particular thumbnail, then in the same way if I am clicking on “Bathroom thumbnail” , It should display & slide 5 (or n) number of images related to this particular section & so on. So this is how I wanna modify the code from ONE-to-ONE [one thumbnail-to-one main display image] to ONE-to-MANY [one thumbnail-to- 5 or n number of images related to that particular thumbnail]
My Modified Thumbnail Section’s HTML code is same.
I have modified the Main Image section as shown ..
<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
<li>
<ul class=”lof-main-subwapper”>
<li>
<img src="images/slider1.jpg" title="Newsflash 2" >
<div class="lof-main-item-desc">
<h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
</div>
</li>
<li>
..
</li>
</ul>
</li>
<li>
<ul class=”lof-main-subwapper”>
<li>
…
</li>
<li>
…
</li>
</ul>
</li>
</ul>
</div>
</div>
I am modifying the slider’s Script code, so far I have adder another wrappersub class & I am stuck while linking the group of images to one thumbnail i.e linking main image section’s ul with thumbnail’s li...
(function($) {
$.fn.lofJSidernews = function( settings ) {
return this.each(function() {
// get instance of the lofSiderNew.
new $.lofSidernews( this, settings );
});
}
$.lofSidernews = function( obj, settings ){
this.settings = {
direction : '',
mainItemSelector : 'li',
mainInnerItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click',
subWrapperSelector :'.lof-main-subwrapper',
wapperSelector: '.lof-main-wapper',
interval : 4000,
innerinterval :20000,
auto : true, // whether to automatic play the slideshow
maxItemDisplay : 5,
startItem : 0,
navPosition : 'vertical',
navigatorHeight : 100,
navigatorWidth : 310,
duration : 600,
navItemsSelector : '.lof-navigator li',
navOuterSelector : '.lof-navigator-outer' ,
isPreloaded : true,
easing : 'easeInOutQuad'
}
$.extend( this.settings, settings ||{} );
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)
if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)
)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width( this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else {
this.subwrapper.css
({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}
if( this.settings.isPreloaded ) {
this.preLoadImage( this.onComplete );
} else {
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj, subwrapper ) {
seft = this;
this.navigatorItems.each( function(index, item ){
$(item).click( function(){
seft.jumping( index, true );
seft.setNavActive( index, item );
} );
$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );
})
this.registerWheelHandler( this.navigatorOuter, this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click', this.settings.buttons, this );
}
if( this.settings.auto )
this.play( this.settings.innerinterval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
},
preLoadImage:function( callback ){
var self = this;
var images = this.subwrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}else {
count++;
if( count >= images.length ){
self.onComplete();
}
}
} );
},
navivationAnimate:function( currentIndex ) {
if (currentIndex <= this.settings.startItem
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
Any HELP would be appreciated.
Thank you
Maybe you could try adding a slide show inside of another slider that will support more content like the Anything Slider. I've used it on projects and had some luck with adding my own custom stuff in the slides.
try adding "var" to line 238, it becomes: var seft = this;