I am using jquery-bootgrid and want to know how to change the "loading" and "noResults" labels.
The doco http://www.jquery-bootgrid.com/Documentation
states "All labels can be set and overridden on initialization respectively."
but I am unsure how to do this.
It works just like that way:
$(function()
{
$("#grid").bootgrid({
labels: {
noResults: "where are my results"
}
});
});
<table id="grid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.min.js"></script>
Related
The onclick event is complaining that the java script function is not defined.
<body>
<div layout:fragment="content" th:remove="tag">
<div class="container">
<h6 class="mb-3">Restaurant Order Details</h6>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Order Details</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems('${order.orderId}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td th:text="${grandTotal}"></td>
</tr>
</tbody>
</table>
<div class="mb-4"></div>
</div>
</div>
<script>
function getOrderItems(orderId) {
alert("order details here");
}
</script>
</body>
When I click on the table row I get
Uncaught ReferenceError: getOrderItems is not defined
at HTMLTableRowElement.onclick
When I replace getOrderItems with a simple alert instead, the alert is fired. How do I fix this?
I know this is probably not the answer you looking for, it's just a suggestion:
In JavaScript, you can actually use the thymeleaf variables like this:
var myVar = [[${order.orderId}]];
The issue here was I declared my <script> outside the <div layout:fragment="content" th:remove="tag"> tag. Since this is a fragment, thymeleaf only rendered everything within this scope. Putting the script tag inside this solved the issue.
You are not passing thymeleaf variable to javascript. You can issue <script> outside your (just above </body>) and still pass variable to JS.
<script th:inline="javascript">
/*<![CDATA[*/
var orders = [[${orders}]];
function getOrderItems(orders) {
alert("order details here ");
}
/*]]>*/
</script>
Then you can call JS method on your html onclick event.
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems(orders)}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
However, I still see a challenge if you wish to pass every single order to javascript. I haven't used <script> inside the th:each loop.
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
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th hidden>ID</th>
<th>Full Name</th>
<th>Age</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function(){ retrieve_user() });
When i retrieve data from database the features is not shown. and if i click the button for export from the datatable feature, it doesnt show data
function retrieve_user(){
$.ajax({
url:'../conn/callFunc.php',
method:'POST',
data:{
_trans:'retrieve_user'
},
success:function(msg){
$(function () {
$('#datatable-buttons').DataTable();
})
$("#datatable-buttons tbody").html(msg);
}
})
}
</script>