I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:
https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0
When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
VISUALIZZAZIONE OFFERTE ABITATIVE
<small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
</h2>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
{$sizeOffers = count($offers)}
{if $sizeOffers gt 0}
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
{else}
<div class="alert alert-warning">
Non c'รจ nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
</div>
{/if}
<hr>
<div class="text-center">
Aggiugi un'offerta
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
</div>
</div>
</div>
</div>
</div>
{include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>
As you can see, offers.tpl is an included file and contains:
<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
<tr>
<th>Azioni</th>
<th>Identificativo</th>
{if !isset($from_contact)}
<th>Offerente</th>
{/if}
<th>Affitto/Vendita</th>
<th>Comune</th>
<th>Telefono</th>
<th>Provenienza</th>
<th>Tipologia</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>
Can you help me?
Create responsive tables by wrapping any .table in .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Related
The app has 3 rows of 2 tables each [in the code snippet there's just one row] and I'm trying to create events that:
Header is clicked
The other table in the row becomes hidden
The table with the clicked header expands to fill the div space
Is this possible?
I've tried using Bootstrap expand and collapse but that doesn't really fulfill what I want the code to do.
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
Post Change
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header bg-dark text-white">
New Members
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I am expecting the clicked table to expand to fill the space the other hidden table takes up when it becomes hidden.
To accomplish this, add a click event handler to the header for each table. In these handlers, you can hide the div you don't want to be shown, but you will also need to update the displayed div to make it use the remaining space. This can be done by adding the col-12 class and removing the col-6 class (also during the same event).
I'm not sure if you're using any libraries, but with jQuery it would look something like this:
$('#table1headerid').click(function(){
$('#div2id').hide();
$('#div1id').removeClass('col-6').addClass('col-12');
});
$('#table2headerid').click(function(){
$('#div1id').hide();
$('#div2id').removeClass('col-6').addClass('col-12');
});
This can be done without jQuery of course, but I'm lazy :)
****TO VIEW THIS PLEASE CLICK EXPAND SNIPPET ****
In here what I did was just add JQuery and toggle the col-6 with col-md-11 and col-md-1. I didnt hide the DIV. If you wants to hide a dive you can use d-none in JQuery.
function hideOrExpandDivPostChange(){
$('#postChange').toggleClass('col-md-1');
$('#newMember').toggleClass('col-md-11');
}
function hideOrExpandDivNewMember(){
$('#newMember').toggleClass('col-md-11');
$('#postChange').toggleClass('col-md-1');
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6" id="postChange" onclick="hideOrExpandDivPostChange()">
<div class="card">
<div class="card-header bg-dark text-white">
Post Change
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="col-6" id="newMember" onclick="hideOrExpandDivNewMember()">
<div class="card">
<div class="card-header bg-dark text-white">
New Members
</div>
<div class="card-body" style="height: calc(100vh - 400px); overflow-y: auto;">
<div class="col-12">
<table class="table table-hover" id="table" data-toggle="table" data-filter-control="true" data-id-field="id" data-height="650" data-pagination="true" data-page-list="[10,25,50,100,250,500]" data-sort-name="memui" data-sort-order="asc">
<thead>
<tr>
[TABLE GOES HERE]
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have installed a DataTable in my application and it returns back an error saying "DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2".
Now I understand that DataTables structure is meant to be working with < tr >< td >, but I would like to use spans and divs inside as shown in the preview below.
Is there any way how data tables can work on this structure? Or if there's any good alternative which can do the same job?
Thanks.
$('#dt').DataTable();
// COLLAPSE TABLE
$('tr[data-toggle="collapse"]').click(function(){
$('.insert-here').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin=" anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<div class="table-responsive">
<!-- Table -->
<table class="table" id="dt">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="table-chevron" data-toggle="collapse" data-target="#AccountDetails">
<td><i class="fas fa-angle-right"></i></td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<tr>
<td class="insert-here coll-bg" colspan="8">
<!-- START OF COMPLETE ACCOUNT SETTINGS -->
<div class="collapse" id="AccountDetails">
<div class="col-12 pl-0 mt-3">
<!-- START OF ACCOUNT SETTINGS -->
<div class="col-4 pl-0 account-details-box float-left">
<h2 class="accounts-heading">Account Settings</h2>
<!-- Account Status -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Status</p>
</div>
<div class="col-md-6 mb-3 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option>Active</option>
<option>Disabled</option>
<option>Deleted</option>
<option>Pending</option>
</select>
</div>
</div>
<!-- Account Manager -->
<div class="row">
<div class="col-md-6 mb-3 float-left">
<p>Account Manager</p>
</div>
<div class="col-md-6 mb-5 pl-0 float-left ac-set">
<select class="form-control custom-select col-md-11">
<option selected="selected">--</option>
<option>Bilal Khan</option>
<option>Rishabh Saxena</option>
<option>Abhishekh Joshi</option>
</select>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Search in your code maybe you have initialized dataTable twice in your code.
You shold have like this code:
$('#example').dataTable( {paging: false} );
Only one Time.
I have 4 tab menus. Initially,I have displayed the last inserted db record in one of the tabs.
But after some period of time duration,the content in that tab where checked and move to the next tab.
I will be using javascript,php and laravel framework.And I have no idea with this.
Please give me some references on this.
Controller code:
public function show()
{
$pendingFiles= priceInfo::all()->first();
$count= count($pendingFiles);
return view('MyList')->with('pendingFiles',$pendingFiles)-
>with('count',$count);
}
this is my controller code..Here itself I had a doubt that,How to get the records based on updated time.
View code:
<div id="nonlive" class="tab-pane fade pull-center">
<br/>
<ul class="nav nav-tabs navbar-centre">
<li class="active pull-left" ><a data-toggle="tab" href="#qcverified">
<h4 ><strong>QCVerified</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#qcfailed"><h4>
<strong>QCFailed</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#qcpending"><h4>
<strong>QCPending ({{$count}})</strong></h4></a></li>
<li class="pull-center"><a data-toggle="tab" href="#archieved"><h4>
<strong>Archieved;</strong></h4></a></li>
<br>
</ul>
<div class="tab-content">
<div id="qcverified" class="tab-pane fade in active">
</div>
<div id="qcfailed" class="tab-pane fade pull-center">
</div>
<div id="qcpending" class="tab-pane fade pull-center">
<div class="row marketing">
<div class="col-lg-15 tab-div" id="version_database" >
<div class='div-tab'>
<div class="box">
<div class="box-header">
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-
hover dataTable" role="grid" aria-describedby="example2_info">
<thead>
<tr class="header">
<th valign="middle" width="3%">S.no</th>
<th valign="middle" width="10%">Product Details</th>
<th valign="middle" width="5%">SKUID</th>
<th valign="middle" width="20%">Type of Request</th>
<th valign="middle" width="5%">Action</th>
</tr>
</thead>
<tbody role="alert">
<td>{{$pendingFiles->productId}}</td>
<td>{{$pendingFiles->productName}}</td>
<td>{{$pendingFiles->SKUID}}</td>
<td>Create Request Listing</td>
<td>action</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="archieved" class="tab-pane fade pull-center">
</div>
</div>
</div>
You can try like this.
Firstly, you add url on each tab. like following.
Tab1: http://localhost/somepage/tab/1
Tab2: http://localhost/somepage/tab/2
Tab3: http://localhost/somepage/tab/3
And in javascript, you can trigger timer.
<script>
var tab_id = '{{$tab_id}}';
var time_in_ms = 10000;
setTimeout(function(){
location.href = '/somepage/tab/' + (tab_id + 1);
}, time_in_ms);
</script>
I'm trying to make it so when you click on a row in the table, depending what row you press, it will display that data into the other panel. So when I click the first row, the Number in the table fills out the number in the other panel, under "Readings". As well as the Name in the table, filling out the Name field under "Readings". How would I go about doing this?
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
There you go pal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Table</h4>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>First</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Second</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Third</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Fourth</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Form</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Readings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Number:</label>
<div class="col-md-8">
<input
type="text"
id="numberInput"
class="form-control"
placeholder="Number"
disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input
type="text"
id="deviceInput"
class="form-control"
value="Name here" />
</div>
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end col-10 -->
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- end row -->
<script>
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#numberInput');
var device = document.querySelector('#deviceInput');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
device.value = data[1];
}
})();
</script>
</body>
</html>
With vanilla Javascript (there are data-binding libraries that can handle this), table rows do have click events. So you can create a function that handles that click event.
You can either use the onclick attribute or addEventListener method of HTML elements. You can explicitly state the input to the function or calculate it. So say the function name is updateOther, you could do updateOther(1,'First') or updateOther(this). The latter will pass the row element that was clicked and you can extract the pertinent information.
$(document).ready(function(){
$(".gradeA").click(function(){
var currentRow = this;
var number = $(this).find("td")[0].innerText;
var name = $(this).find("td")[1].innerText;
$("form input[type='text']").val(number);
$("form input[type='device']").val(name);
})
});
I am trying to create loader for my website but it is not working .I am using turbolinks classic for this operation.The loader loads after the page load which i don't want .I need when page is loading that time i need my loader to load and when the page gets load the loader should get disappear both things are not working.Here is my code
<div id="content-wrapper">
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
<div class="row">
<div class="col-lg-12">
<div class="main-box clearfix">
<div class="clearfix">
<div class="common_page gsb1">
<div class="hdr">
<div class="row">
<div class="col-md-3">
<h4>Dashboard</h4>
</div>
<div class="col-md-5">
</div>
<div class="col-md-4 pull-right">
<%=render 'common/date'%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<div class="table-responsive custom-bg">
<table class="custom-table" cellspacing="0">
<tr>
<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0">
<tr>
<td> Name</td>
<td>Email </td>
</tr>
<tr></tr>
<%#dashboard.each do |dashboard|%>
<tr>
<td><b><%=dashboard[:NAME]%></b></td>
<td><%=dashboard[:email]%></td>
</tr>
<%end%>
</table></td>
</tr>
</table>
<%= will_paginate #dashboard %>
</div>
</center>
<%=render 'common/footer'%>
</div>
<script>
$("#retailer").attr("class","active")
$(document).on('page:load', function(event) {
$('.loader img').css("display","none");
});
</script>
But the loader is not loading the image Can anyone tell me how to do that.And I don't want to use ajax for this thing
set display to block initially :-
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div>
or just
<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>
and remove
$(document).on('page:before-unload', function(event) {
//remove $('.loader img').css("display","block");
});
As a result,the loader image will be not visible after document is loaded fully but is visible till then