------->Picture dataTable responsive error
I am using datatTable of https://datatables.net/, with this link and script, I am using jquery and bootstrap4
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
It is working fine with computer screen but not with cellphone screen
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
*****
<div class="container">
<div class="row">
<div id="textH4D"class="col-12">
<h4 id="h4D">Devices</h4>
</div>
<div id="tablaDevices"class="col-12">
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
<td>Row 1 Data 5</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
<td>Row 2 Data 4</td>
<td>Row 2 Data 5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
I need help with that please
Related
I am working on a project where I need to create the PDF from the view. but in the blade file the "ß ß ß ß ß ß" characters, as I checked my codes there are no tags which contain these characters. can any one help me to fix this issue? I have added the blade file code. Please have a look.
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
#if (count($data['data']) > 0)
<table class="table table-condensed">
<tr>
<td><img src="{{public_path().'/theme/frontend/images/logo.png'}}"alt="kpvlogo"></td>
<td colspan="8" style="text-align: center; font-size:24px; font-weight: bold;">Weekly Ranking</td>
<td colspan="6" >Week Ending {{$data['end']}}</td>
</tr>
<tr>
<thead>
<th style="font-weight: bold;">Store</th>
<th style="font-weight: bold;">Net Sales</th>
<th style="font-weight: bold;">+/- Last Year %</th>
<th style="font-weight: bold;">Cust.Count +/- %</th>
<th style="font-weight: bold;">Labour %</th>
<th style="font-weight: bold;">Food %</th>
<th style="font-weight: bold;">Cash %</th>
<th style="font-weight: bold;">GSS</th>
<th style="font-weight: bold;">Complaints</th>
<th style="font-weight: bold;">Speed of Service</th>
<th style="font-weight: bold;">Training</th>
<th style="font-weight: bold;">Rank</th>
</thead>
</tr>
<tbody>
#foreach ($data['data']['grid'] as $item)
<tr>
<td>{{$item['store']}}</td>
<td class="text-right">{{$item['net_sales']}}</td>
<td class="text-right">{{$item['last_year']}}</td>
<td class="text-right">{{$item['customer_count']}}</td>
<td class="text-right">{{$item['labour']}}</td>ß
<td class="text-right">{{$item['food']}}</td>
<td class="text-right">{{$item['cash']}}</td>
<td class="text-right">{{$item['gss']}}</td>
<td class="text-right">{{$item['complaints']}}</td>
<td class="text-right">{{$item['speed_of_service']}}</td>
<td class="text-right">{{$item['training']}}</td>
<td class="text-right">{{$item['rank']}}</td>
</tr>
#endforeach
<tr>
<td colspan="12" class="text-center">Top Performer of the Week</td>
</tr>
<tr>
<td colspan="12" class="text-center">Congratulations to the team from <b>{{$data['data']['top']['store']}}</b> for achieving the overall best results this week.</td>
</tr>
<tr>
<td colspan="12" class="text-center">Thank You!</td>
</tr>
</tbody>
</table>
#endif
{{-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>
var body_text = $('body').text();
var match = body_text.match('ß');
console.log(match);
</script> --}}
</body>
</html>
It would help if you can identify where in the blade file the special characters appear. Seeing that none of the ß ß ß ß ß ß characters can be found in your blade, this suggests that what's causing it is somewhere in your database. I recommend you inspect the data and the database column of the $item where the characters are seen and you may find the cause.
I am using bootstrap4 DataTable.I am using spring boot. I have passed my data from my controller like bellow..
List<User> list = new ArrayList<>();
#GetMapping(value = "/staff-details")
public String staffDetails(Model model) {
model.addAttribute("staffList",list );
return "staff-details";
}
It is working fine when like bellow..that means there is no loop
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
When I want to populate data dynamically from database, it is not working..I am using like bellow..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src=" https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
fixedHeader: true
});
});
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr th:each="user: ${staffList}">
<td th:text="${user.firstName +' '+ user.lastName}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.restaurantId}"></td>
<td th:text="${user.restaurantBranchId}"></td>
<td th:text="${user.userRole}"></td>
</tr>
</tbody>
</table>
</body>
Please help me why it is not working in loop..
I am using DataTables and moment and have custom date format on my table.
How can I sort the column by moment?
Here you can see that sorting does not work correctly updated_at column.
I am using Datatable moment. Update_at format already changed by Carbon on Model.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<div class="table-responsive">
<table id="tickets-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>User name</th>
<th>Last update</th>
</tr>
</thead>
<tbody>
<tr>
<td>saddsfdsafdfsafsa</td>
<td>Sqe Begush</td>
<td>1 hour ago</td>
</tr>
<tr>
<td>testing</td>
<td>User name</td>
<td>8 hours ago</td>
</tr>
<tr>
<td>another</td>
<td>another user</td>
<td>4 days ago</td>
</tr>
<tr>
<td>another testing</td>
<td>user user</td>
<td>1 week ago</td>
</tr>
<tr>
<td>another testingsss</td>
<td>user user11</td>
<td>1 year ago</td>
</tr>
<tr>
<td>another test</td>
<td>user userqww11</td>
<td>4 months ago</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
<script>
$(document).ready(function() {
//$.fn.dataTable.moment("YYYY/MM/DD");
$('.table').DataTable();
});
</script>
The origin of the dates is unclear. If you pass moment().fromNow() yourself then just stop doing it when the display type is sort (see below). If you get already formatted data from a source you can use a library like chrono, which can parse "human dates" into "system dates":
var table = $('#tickets-table').DataTable({
columnDefs: [
{ targets: 2,
render: function(data, type) {
if (type == 'sort') {
var date = chrono.parseDate(data)
return new Date(date).valueOf()
}
return data
}
}
]
})
demo with the <table> above -> http://jsfiddle.net/mw0c3f91/
you have to convert the column dates to required format and then Sort the table.
moment(col[0]).fromNow();
I'm getting one issue in the datable. I added datatable in my laravel blade file, but when I clicked on the menu (call blade file). Then it shows a normal table, but when I refresh the same page again and then it shows datatable properly. My question is when I click on the menu(call blade file), then why it is not showing datatable properly. It shows a normal table only. How to fix this.
please check imagesthis image is before refresh
this image is after refresh
and this is my blade file
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
#endsection
#section('footerInclude')
<script type="text/javascript">
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
</script>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
#endsection
any help will be appreciated.
Thanks in advance.
Your Blade file should be like this.
You should add script files before you write your script.
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').DataTable();
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
} ;
</script>
#section('footerInclude')
#endsection
I'm a fresher in codeigniter. I want to search,sort and apply pagination to my table.
I tried my best.when search code is working sorting may not work. i can't perform these three actions in a single table. please help me.
use Bootstrap datatables. It has in built search, Sort and pagination too.
Sample of My code
In View
<div style="clear: both; margin-top: 35px"></div>
<div class="container">
<div class="col-sm-12" style="padding: 0px">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 " style="padding-right:0px;">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th width="20%"></th>
<th width="15%"></th>
<th width="20%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<?
foreach ( $ as $ )
{
?>
<tr>
<td><?php echo $['']?></td>
<td><?php echo $['']?></td>
<td><?php echo $['']?></td>
<td><?php echo $['']?></td>
</tr>
<?
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
In Controller
$data[''] = $this->model_name->function_name();
In Header
<link href="<?php echo base_url(); ?>css/bootstrap.css" rel="stylesheet" />
<link href="<?php echo base_url(); ?>css/bootstrap-glyphicons.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" />
Output