I'm trying to add a jQuery data table in Salesforce lightning component. Here is the code. It is not loading at all. What am I doing wrong?
<ltng:require scripts="{!join(',','//cdn.datatables.net/1.10.4/css/jquery.dataTables.css'
,'//code.jquery.com/jquery-1.12.4.js'
,'//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js')}"
afterScriptsLoaded="{!c.afterscriptsLoaded}"/>
<table id="showContacts" class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="EID">EID</span>
</th>
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="Name">Name</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">
<div class="text-wrap">10887738</div>
</td>
<td>
<div class="slds-truncate text-wrap" title="Adam Will">Adam, Will</div>
</td>
</tr>
</tbody>
</table>
({
afterscriptsLoaded : function(component,event,helper){
j$('[id$="showStudents"]').DataTable({
"scrollY": "260px",
"scrollCollapse": true,
"paging": true,
"searching": true,
"ordering": true,
"info": true,
"dom": 'Bfrtip',
"buttons": [
'copy',
{extend: 'csv',title: 'Criteria export'},
{extend: 'excel',title: 'Criteria export'},
{extend: 'pdf',title: 'Criteria export'},
'print'
]
} );
},
})
My question is about how to show this table on lightning component in Salesforce? Whenever I load the page I see a blank page.
Note: I am showing a sample table.
Related
My Datatable jQuery code is like below.
$(".shop_table").DataTable({
pageLength: 10,
filter: true,
deferRender: true,
});
My HTML code is like below.
<table class="shop_table shop_table_responsive table table-striped table-bordered">
<thead>
<tr>
<th class="product-name">Attribute Name</th>
<th class="product-desc">Catalog Number</th>
<th class="product-price">Value</th>
</tr>
</thead>
<tbody>
{{#each this}}
<tr>
<td class="product-desc">
{{ this.ATTRIBUTE_NAME }}
</td>
<td class="product-price" data-title="Box Price">
{{ this.CATALOG_NUMBER }}
</td>
<td class="product-quantity" data-title="Number of Boxes">
{{ this.VALUE }}
</td>
</tr>
{{/each}}
</tbody>
</table>
But I am getting output like below without Search Box & Pagination.
Depending on what styling integration option you selected (BootStrap, jQuery UI, Foundation etc...) it may wipeout your default datatable DOM setting. Setting up the DOM in DataTables is difficult. You can read about it here.
jQuery DataTables DOM info
I was going to just leave a comment, but i don't have the rep to do that. I use BootStrap and in the DataTables settings I have this
$.extend($.fn.dataTable.defaults, {
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
pageLength: 25,
dom: "<'row'<'col-md-3'l><'col-md-7'f><'col-md-2 text-right'B>><'row'<'col-md-12't>><'row'<'col-md-6'i><'col-md-6'p>>",
autoWidth: false,
language: {
search: "Filter",
emptyTable: "No records found"
}
});
I am having a table in vue template like below,
<table class="table vmiddle no-padding hover table-striped" id="match-expressions">
<thead>
<tr>
<td><strong>Attribute Name</strong></td>
<td><strong>Expression</strong></td>
<td><strong>Value</strong></td>
</tr>
</thead>
<tbody>
<template v-if="subtypes['filter']['match_expressions']">
<tr v-for="(match_expressions,id) in subtypes['filter']['match_expressions']" :key="id">
<td>{{match_expressions['attribute_name']}}</td>
<td>{{match_expressions['operator']}}</td>
<td>{{match_expressions['values']}}</td>
</tr>
</template>
<template v-else>
<tr>
<td class="data-not-available" colspan="3">No Data</td>
</tr>
</template>
</tbody>
</table>
I am looping subtypes['filter']['match_expressions'], which will be like this,
[{ "attribute_name": "xyz", "operator": "In", "values": [ "SF100" ] }]
But sometimes, the subtypes['filter']['match_expressions'] will be come in below format,
{ "attribute_name": "xyz", "operator": "In", "values": [ "SF100" ] }
If it comes in object, v-for in template is not working. displaying like,
function values () { [nativeCode]}
Dont know how to avoid this. Any help would be much appreciated as I am new to VueJS.
You can try to update template like this in that case:
<template v-if="subtypes['filter']['match_expressions'] && Array.isArray(subtypes['filter']['match_expressions']">
<tr v-for="(match_expressions,id) in subtypes['filter']['match_expressions']" :key="id">
<td>{{match_expressions['attribute_name']}}</td>
<td>{{match_expressions['operator']}}</td>
<td>{{match_expressions['values']}}</td>
</tr>
</template>
<template v-else-if="subtypes['filter']['match_expressions'] && (typeof subtypes['filter']['match_expressions'] === 'object')">
<tr>
<td>{{subtypes['filter']['match_expressions']['attribute_name']}}</td>
<td>{{subtypes['filter']['match_expressions']['operator']}}</td>
<td>{{subtypes['filter']['match_expressions']['values']}}</td>
</tr>
</template>
<template v-else>
<tr>
<td class="data-not-available" colspan="3">No Data</td>
</tr>
</template>
Here,
subtypes['filter']['match_expressions']
we are simply checking if the above expression is an array using Array.isArray(). I yes, then we use the v-for loop. If it is an object, then we do not need to loop, we can simply display the single object properties.
I'm trying to optimize the Datatables buttons pdfHtml5 export of a page. The table data contains nested html tags which are creating additional space above and below the cell data, which makes the PDF very long.
The text in my cell is wrapped in two nested <div> and a <p>. In the PDF export, I only need the contents of the <p>
<td>
<div class="flagimg" style="background-image: url(...)">
<div class="flagtext">
<p>name of country</p>
</div>
</div>
</td>
I'm trying to remove nested html tags using exportOptions, but I'm not sure how to write the syntax correctly. Can anyone help me with this?
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row) {
data = data.replace(/<div class="flagtext"\">/, '');
data = data.replace(/<.*?>/g, "");
return data;
}
}
}
};
var oTable = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} )
]
});
})
I finally discovered that the problem is not the nested div after all, but rather that the tags are indented in the code instead of being on one line. I've reported this to Datatables and I'm documenting the problem here, in case anyone else runs into it.
I've built on the fiddle #davidkonrad made to illustrate what's happening.
https://jsfiddle.net/lbriquet/7f08n0qa/
In the first row, the nested tags are indented in the code... this produces extra space above and below the country name data in the PDF export.
In the second row I've put all of the tags in the same line of code... and no extra spacing is produced in the PDF export.
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td>
<div class="flagimg" style="background-image: url(#">
<div class="flagtext">
<p>Country name</p>
</div>
</div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td><div class="flagimg" style="background-image: url(#)"><div class="flagtext"><p>Country name</p></div></div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
</tbody>
</table>
I have an HTML table in which I have applied the DataTables function to. I use the first row of the table with the class 'template' applied as my template row. Then pick this formatting up and populate all the rows in the table using a JSON feed. The problem is that the pagination provided by DataTables includes this hidden template row so always makes my first page display 1 less row than all the others.
Is there a way to exclude any rows (of which there will only be one) with the class 'template' applied to the tr?
<!-- DataTables CSS -->
<link href="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<div class="alert-message"></div>
<div class="dataTable_wrapper">
<table class="loadtable table table-hover table-stripped" id="problem_table" data-page="0" data-params="" data-orderby="p.name" data-orderdir="DESC" data-url="/admin/problem/ajax/tables/problem" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th class="orderable asc">Name</th>
<th class="orderable no-sort" width="10%">Helpful?</th>
<th class="orderable" width="15%">Created</th>
<th class="orderable c" width="10%">Live?</th>
<th class="r no-sort" width="12%">Actions</th>
</tr>
</thead>
<tbody>
<tr id="problem_#PROBLEMID#" class="template #ROWCLASS#">
<td class="orderable asc">#NAME#</td>
<td class="orderable"><span class="fa fa-thumbs-o-up"> #UP_VOTE#</span> <span class="fa fa-thumbs-o-down"> #DOWN_VOTE#</span></td>
<td class="orderable">#CREATED#</td>
<td class="orderable c"><span class="fa #IS_LIVE#"></span></td>
<td class="r last">#ACTIONS#</td>
</tr>
</tbody>
</table>
</div>
$(document).ready(function() {
delay( function() {
$('#problem_table').DataTable({
responsive: true,
pageLength: 20,
aLengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]],
aoColumnDefs : [{ "bSortable" : false, "aTargets" : [ "no-sort" ] }]
});
}, 200 );
});
You can use the good old custum row filter for this :
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var row = oSettings.aoData[iDataIndex].nTr;
return $(row).hasClass('template') ? false : true;
}
);
Even though it is pre-1.10.x hungarian notation, it still works with DataTable() instances.
demo -> http://jsfiddle.net/zaxkrc49/
This javascript
$('#example').dataTable({"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "width": "50%" },
{ "width": "100px" },
{ "width": "100px" },
{ "width": "50px" },
{ "width": "100px" }
]});
Together with this table
<table cellpadding="0" cellspacing="0" border="0" class="" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
</tbody>
</table>
Ends up being not a fixed size table.
First of all, I don't want it to be 100% width, and secondly, putting px or % in the js part, has no effect at all.
Am I overlooking something?
See here in this fiddle about the datatables auto column width problem
First of all, I would strongly recommend that you upgrade to 1.10.x -> http://www.datatables.net/download/ or at least the latest version of the 1.9-series, 1.9.4.
Then, yes - when using 1.9.0 as you are, (all 1.9.x versions) the columns width option is named sWidth. So instead :
$('#example').dataTable({
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "50%" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" }
]
});
To deal with your requirement "I don't want it to be 100% width" you must specify a width for the table, or at least a max-width. Otherwise datatables will assume the table should be 100% in width, and therefore expand the "sWidth": "50%" column to whatever there is left. So if you want the table to be 700px, as an example :
#example {
width: 700px;
}
your fiddle forked -> http://jsfiddle.net/9n5vrbnz/
If you want a completely fixed width, that is, the table and the injected controls like the search box and pagination to be kept within a certain width, you can style the wrapper element. It is always named <table id>_wrapper :
#example_wrapper {
width: 700px;
}
se fiddle -> http://jsfiddle.net/1rce0d4k/