<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>
Related
I am new to Laravel and trying to create a simple sortable table using JQuery.
I have the following in my view:
<table id="dtBasicExample" class="table">
<thead>
<tr>
<th scope="col">Submission ID</th>
<th scope="col">Advisor ID</th>
<th scope="col">Advisor Name</th>
<th scope="col">Advisor Email</th>
<th scope="col">Link</th>
<th scope="col">Employer Name</th>
<th scope="col">Received Date</th>
<th scope="col">Plan Renewal Date</th>
<th scope="col">Status</th>
<th scope="col">Copy</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
#foreach($plans as $plan)
<tr>
<td> {{$plan->id}}</td>
<td> {{$plan->advisor_id}}</td>
<td> {{$plan->advisor->name}}</td>
<td> {{$plan->advisor->email}}</td>
<td>Click Here</td>
<td>{{$plan->employer_name}}</td>
<td>{{$plan->updated_at}}</td>
<td>{{$plan->medical_plan_renewal_date}}</td>
<td>{{$plan->status}}</td>
<td>Copy</td>
<td>Delete</td>
#endforeach
</tr>
</tbody>
</table>
I have the following in my app.js file:
$(document).ready(function() {
$("#dtBasicExample").DataTable();
$(".dataTables_length").addClass("bs-select");
});
I have the following in my app.css file:
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}
I imagine I am wrong on where to put the JS and/or CSS. My understanding is the bootstrap.js file pulls in JQuery and the app.js file pulls in the bootstrap.js file. Also, my app.css (in public folder) is highlighted red when I open it.
There is not many useful examples with jQuery jscroll and it is a fact it doesn't work with table rows by default because it puts the results into a div element which screws up the table.
I had this HTML template
<table class="table responsive-table-list">
<thead>
<tr>
<th>label 1</th>
<th>label 2</th>
<th>label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
<tbody>
</table>
How can I make it jScrollable?
You need your own controller which provides the data. This is not part of this solution. The output in this case has to be HTML and has to contain the next X rows of the table.
The HTML template wrapped with an extra div. The next page link (pointing to the controller) is added as a new row. jscroll will remove the A and the TD tags but will not remove the TR as it is not aware of it. We have to do it later otherwise the empty TR tags break the HTML.
I pass the auto-trigger and the loading-html in the data argument which I can access from the javascript code.
I use nextPageLoad class in the A tag which helps me to recognize the jscroll related link.
<div class="jscroll" data-auto-trigger="true" data-loading-html="Loading..">
<table class="table responsive-table-list">
<thead>
<tr>
<th>label 1</th>
<th>label 2</th>
<th>label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
<tr>
<td colspan="3">
Next page
</td>
</tr>
<tbody>
</table>
</div>
the javascript code. The debug is activated!
var EndlessScroll = (function ($) {
function init() {
var $scrollEl = $('.jscroll');
var autoTrigger = $scrollEl.data('auto-trigger');
var loadingHtml = $('<span>');
loadingHtml.text($scrollEl.data('loading-html'));
$scrollEl.jscroll({
loadingHtml: loadingHtml[0].outerHTML,
padding: 20,
autoTrigger: autoTrigger,
nextSelector: '.nextPageLoad',
callback: function (data) {
var $table = $('.jscroll table tbody');
// moves the new elements from the jscroll div to the table
$('.jscroll-added tr').appendTo($table);
// removes the empty tr encapsulated the jscroll pagination
var rows = $table.find('tr');
rows.each(function(idx, el){
if ($(el).children().length === 0) {
$(el).remove();
}
});
},
debug: true
});
}
return {
init: init
};
})(jQuery);
$(EndlessScroll.init);
i can't load able to pass a parameter to the dompdf function LoadView.
this is my controller:
public function pst_affluiti(){
$data=DB::all('Anagrafica')->get();
$pdf = PDF::loadView('output',['data' => $data]);
return $pdf->stream('output.pdf');
}
my output.blade.php
<body>
<div class="container">
<table class="table table-sm table-bordered" >
<thead>
<tr>
<th scope="col-sm-1 col-6">Data Affl.</th>
<th scope="col-sm-2">Cron.</th>
<th scope="col-sm-2">Cognome</th>
<th scope="col-sm-2">Nome</th>
<th scope="col-sm-2">Data nac.</th>
</tr>
</thead>
<tbody>
#foreach($data as $row)
<tr>
<td>{{$row->Cron}}</td>
<td>{{$row->Surname}}</td>
<td>{{$row->Name}}</td>
<td>{{$row->Date}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</body>
if i load a normal view of my query it works well.
Any suggest?
Thanks in advance
you can use
compact('data')
instead of
$data
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();
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
<link href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th data-field="make" data-hidden="true">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>535d</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>320d</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2007</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Peugeot</td>
<td>407</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>159</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Nissan</td>
<td>Almera</td>
<td>2001</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Mitsubishi</td>
<td>Lancer</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Opel</td>
<td>Vectra</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>Q7</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2012</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2013</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Nissan</td>
<td>Qashqai</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Mercedez</td>
<td>B Class</td>
<td>2007</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
<tr>
<td>Lancia</td>
<td>Ypsilon</td>
<td>2006</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
Initializing from HTML table, how can I specify a column to be hidden? I need to access the data for that column in JS, but don't want to have that data visible to the end user.
http://demos.telerik.com/kendo-ui/grid/from-table
I've tried to use the attribute: data-hidden="true" on the th tag (data-field is also on th tag, as it is in the demo), but it's not working.
Note, I'd like to be able to specify the hidden option as an html attribute, if possible.
unfortunately you can't use the attribute hidden when initializing from an HTML table:
http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
Relevant quote:
When creating the Grid from an existing table, the following column
settings can be defined via HTML attributes:
data field names via data-field attributes
column widths via width styles applied to the respective elements
define data type via data-type attributes
define a column template via data-template attributes
enable or disable the column menu via data-menu attributes
enable or disable sorting via data-sortable attributes
enable or disable filtering via data-filterable attributes
enable or disable grouping via data-groupable attributes
All attributes should be applied to the <th> elements, except the column width styles.
All other column-related settings cannot be defined via HTML attributes in the <table>. If such settings must be used (e.g. commands, locking, editors, etc.) then the above attribute configuration should be abandoned and all settings should be included in the Grid's Javascript initialization statement (when using declarative widget initialization, the column properties should be set via the data-columns attribute).
For more info on that:
http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes
This is a good overview of declarative initiation in kendo.
http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid
This post is a good example of declaritive initialization specific to grids
With that being said, Here's a quick and dirty workaround if you are seriously married to the plain old HTML format (this would allow you to set hidden via a data attribute, rather than hiding individual columns--which may or may not be important to you):
$(document).ready(function() {
var columns = $('#grid th'),
grid = $("#grid").kendoGrid({
height: 550,
sortable: true
}).data("kendoGrid");
for(var i =0; i < columns.length; i++){
if($(columns[i]).data("hidden") === true){
grid.hideColumn($(columns[i]).data("field"));
}
}
});
http://jsbin.com/mapadu/edit?html,js,output
You can hide column after the initialization of the widget. using the data field string
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("airconditioner");
});
</script>
Here is a working demo, but user can always check the source of the page and view the data because this only set the style of the <td> to display:none