Datatable js structure not working in livewire when I view livewire view without load but it's working when I view livewire with load it's fine.
So how I refresh the js code when I view a livewire view file without load?
For Example
Livewire view with load window - https://ibb.co/QDPJk4j
Livewire view without load window - https://ibb.co/KDqvdc7
$(document).ready(function () {
$('#tableExample1').DataTable({
"dom": 't'
});
$('#tableExample2').DataTable({
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>t<'row'<'col-sm-6'i><'col-
sm-6'p>>",
"lengthMenu": [[6, 25, 50, -1], [6, 25, 50, "All"]],
"iDisplayLength": 6,
});
$('#tableExample3').DataTable({
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
{extend: 'copy', className: 'btn-sm'},
{extend: 'csv', title: 'ExampleFile', className: 'btn-sm'},
{extend: 'pdf', title: 'ExampleFile', className: 'btn-sm'},
{extend: 'print', className: 'btn-sm'}
]
});
});
I need to reload the js when I view Livewire view file with emit.
Related
Is it posible to decrease the show entries in datatable. I want to only show 5 entries instead of 10.
change the iDisplayLength. This for example:
$(document).ready(function() {
$('#tbl_id').dataTable({
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"iDisplayLength": 5
});
} );
I am working on a web page where I am using jQuery datatable plugin.
I am using "colvis" button to show/hide table columns.
I am facing a problem when I remove all columns(empty table after deselect all columns) and then select column(s) again. How to solve it? TIA.
*If there is at-least 1 column in the table then its working perfectly.
No error on console as well.
$(function () {
var table = $(".mydataTable").dataTable({
"pagingType": "full_numbers",
"iDisplayLength": 10,
bJQueryUI: true,
"aLengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],
buttons: [
{
extend: 'colvis',
text: '<i class="fa fa-eye fa-lg"></i>',
collectionLayout: 'fixed one-column',
postfixButtons: ['colvisRestore']
}
],
dom: 'lfBrtip',
});
Code to print excel and pdf
I would like to hide a column from a datatable using tabletool.
var tableTools = new $.fn.DataTable.TableTools(table, {
'aButtons': [
{
'sExtends': 'xls',
'sButtonText': 'Excel',
'sFileName': 'Article.xls'
},
{
'sExtends': 'print',
},
{
'sExtends': 'pdf',
'sFileName': 'Article.pdf',
'bFooter': false
},
],
'sSwfPath': '//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf'
You need to add "columns" to show (skipping as not to show) as example below:
{extend: 'print',
titleAttr: 'Print the results',
title: '',
exportOptions: {
columns: ':visible',
stripHtml: false,
**columns: [1, 2, 5, 6, 8, 9, 10]**,
},
text: '<i class="fa fa-print fa-lg text-success"></i>',
message: 'REPORT NAME' ,
customize: function (win) {
$(win.document.body)
.css('font-size', '10pt')
.prepend(
'<img src="" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
I finally got my asp.net grid to display data...
But I need it to link to an action when clicking on one of the rows... or if need be, a single column How can I get a route into one of my columns or rows in MVC3?
I am using jqGrid btw...
Here is how I set up my Grid
$("#list").jqGrid({
shrinkToFit: false,
autowidth: true,
datatype: 'jsonstring',
mtype: 'POST',
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth',
'Completed Pathway',
'Completed Pathway Reason',
'PCP Appointment',
'Specialist Appointment',
'Admit Date'
],
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left' },
{ name: 'Completed_Pathway', width: 125, align: 'left' },
{ name: 'Completed_Pathway_Reason', width: 165, align: 'left' },
{ name: 'PCP_Appointment', width: 115, align: 'left' },
{ name: 'Specialist_Appointment', width: 125, align: 'left' },
{ name: 'Admit_Date', width: 185, align: 'left' }],
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/Content/themes/UPMC-theme/images',
caption: 'My first grid'
});
Any way to make an entire row clickable to an action method?
To open my view I need to call a controller and an action...
EditEncoutner is the controller, and EditEncounter is the Action...
public ActionResult EditEncounter(int encounterId, int popId)
{
string UID = HttpContext.User.Identity.Name;
DataRepository dr = new DataRepository();
PatientACOModel patMod = dr.Get(encounterId, UID);
TempData["POPULATIONID"] = popId;
return View(patMod);
}
Now I write up the JSON string myself... I am think of putting an <a /> tag in the relevant columns. But that would mean I am not making the entire row clickable, and I would then have to chose which column to put the link...
I could just make an edit column, which is what I will do if all else fails, I was kind of hoping for a more elegant solution however.
Assuming your View is binded to a List of Products class objects
#model IEnumerable<Product>
<table>
#foreach(var product in Model)
{
<tr class="trClickable" data-viewurl="#Url.Action("View","Product",new {#id=product.ID})">
<td>
#product.Name
</td>
<td>
#product.Price
</td>
</tr>
}
</table>
We will add a little javascript to capture the click event of the row.
<script type="text/javascript">
$(function () {
$(".trClickable").click(function () {
var item = $(this);
window.location.href = item.data("viewurl");
});
});
Assuming you have an action method called View inside your ProductController which accepts a parameter called id and show some data in it's view
I have a visualforce page and I am using jqgrid to display data on this page. The url that the jqgrid points to is a visualforce page(https://test.visual.force.com/apex/GridResults) which outputs only JSON data. This page does not have any header or html information.
The problem is that when I run this page, the grid renders with column names but no data.
When I run the url it outputs JSON data. I have pasted below the code.
jQuery("#list").jqGrid({
url:"https://test.visual.force.com/apex/GridResults",
datatype: "json",
colNames: [{!fieldNames}], -- property in controller which outputs fieldnames
colModel: [{!colModel}], -- property in controller which outputs column definition
rowNum: 10,
rowTotal:10,
rowList: [20, 40, 60],
loadonce:true,
mtype:"GET",
gridView:true,
pager: '#pager',
sortname: 'Record ID',
sortorder: "desc",
width: 1200,
height: 400,
caption: "Accounts"
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: false })
};
Any ideas on why the data from the page is not consumed by the jqgrid? Help much appreciated.
Have you look into Visualforce remoting?