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/
Related
I am using the JQuery Datatables plugin (https://datatables.net/).
I would like to be able to reference the original HTML <th></th> column header values.
<table border="0">
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</thead>
<tbody>
<tr>
<td>data for column 1</td>
<td>data for column 2</td>
<td>data for column 3</td>
</tr>
</tbody>
</table>
I know that columns can be named within the plugin using the columns property:
$('#mytable').DataTable(
{
columns: [
{name: 'column1'},
{name: 'column2'},
{name: 'column3'}
]
}
)
However it would be very useful when dealing with dynamically created HTML to be able to reference the HTML <th> tag in order to find the Datatables index for the column with a specific name.
I have had a look at dataTable.context[0].aoHeader and can see both and idx and innerHTML objets within that, however it looks like table().header() might provide a solution.
You can use the column.name values shown in the question to select the DataTables column index values.
Example:
table.column( 'column2:name' ).index()
Demo:
$(document).ready(function() {
var table = $('#mytable').DataTable(
{
columns: [
{ name: 'column1' },
{ name: 'column2' },
{ name: 'column3' }
]
}
)
let idx = table.column( 'column2:name' ).index();
console.log( idx ); // prints 1 (2nd column's index)
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="mytable" class="display dataTable cell-border" style="width:100%">
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</thead>
<tbody>
<tr>
<td>data for column 1</td>
<td>data for column 2</td>
<td>data for column 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This uses the column() API function, together with a column selector.
There are various different ways you can provide a column selector - one of which is the way I show in the above code:
'YOUR_COL_NAME_HERE:name'
Then the index() function returns the zero-based column index.
If you have draggable columns (i.e. columns can be reordered) then you may also need to add a selector modifier to account for that, depending on what specific index you want - the original one, or the currently displayed one.
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 need help to select a table header and select your column using classes. As in Netflix. I'm noob in VueJS
Example GIF
My code is
<table class="table">
<thead class="text-center">
<tr>
<th scope="col"><button type="button" class="btn plan_columnA selected" #click="planSelect('plan_columnA')">Column A</button></th>
<th scope="col"><button type="button" class="btn plan_columnB" #click="planSelect('plan_columnB')">Column B</button></th>
<th scope="col"><button type="button" class="btn plan_columnC" #click="planSelect('plan_columnC')">Column C</button></th>
</tr>
</thead>
<tbody class="text-center">
<tr>
<td class="plan_columnA selected">Mark</td>
<td class="plan_columnB">Otto</td>
<td class="plan_columnC">#mdo</td>
</tr>
<tr>
<td class="plan_columnA selected">Jacob</td>
<td class="plan_columnB">Thornton</td>
<td class="plan_columnC">#fat</td>
</tr>
<tr>
<td class="plan_columnA selected">Larry</td>
<td class="plan_columnB">the Bird</td>
<td class="plan_columnC">#twitter</td>
</tr>
</tbody>
</table>
My style is
.btn {
background-color: darkgrey;
color: white;
}
button.selected {
background-color: red;
}
td.selected {
color: red;
}
I try to do this, but I do not know if it's right
export default {
data () {
return {
planSelected: '',
}
},
methods: {
planSelect (plan) {
this.planSelected = plan;
$('.selected').removeClass('selected');
$('.' + this.planSelected).addClass('selected');
},
},
}
I tried JQuery, but I want to do it in VueJS.
Thanks!
That's fairly easy, i've made an example for you in a fiddle, hope it helps you on the way. It should be made more dynamically, for better overview, but you can play around with the code i've made.
In the perfect scenario, you would generate all rows/columns from a data variable, instead of doing all this manually.
https://jsfiddle.net/6aojqm0k/
What i've made is just having 1 data variable, which you set and check for on the different tds and buttons.
data: () => ({
planSelected: 'plan_columnA'
})
Button to choose the plan:
<button type="button" class="btn plan_columnA" :class="{selected: planSelected === 'plan_columnA' }" #click="planSelected = 'plan_columnA'">Column A</button>
And the actual column to show selected
<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>
Pro tip: Never combine jQuery and VueJS - Just use VueJS
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 want my datatable to display 50 rows per page.
I tried to set it with : bLengthChange: true and pageLength: 50 but it didn't work.
In an ideal world, I would also get rid of the bLengthChange -> false, so that I don't see the combo to select how much rows do I want...
Here is my code.
<html><body>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
</head>
<body>
<table class="table responsive table-togglable table-hover">
<thead>
<tr>
<th data-toggle="true">ID</th>
<th >Usuario</th>
<th >Objeto</th>
<th >Id del Objeto</th>
<th class="none">Antes</th>
<th class="none">Despues</th>
<th >type</th>
<th >Creación</th>
<th >Actualización</th>
</tr>
</thead>
<tbody>
<tr>
<td>2165</td>
<td> - </td>
<td>PersonReferences</td>
<td>3802973</td>
<td> - </td>
<td> Large Text </td>
<td>created</td>
<td>2016-05-11 17:07:23</td>
<td>2016-05-11 17:07:23</td>
</tr>
</tbody>
</table>
<script src="http://rh.dev/assets/materialize/js/jquery-1.11.2.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/datatables.min.js"></script>
<script src="http://rh.dev/assets/js/datatables/extensions/responsive.min.js"></script>
<script>
$('.table-togglable').DataTable({
bLengthChange: true,
pageLength: 50,
bInfo: false,
responsive: true,
"bAutoWidth": false,
});
</script>
Any Idea?
You can use iDisplayLength for DataTables 1.10+:
Number of rows to display on a single page when using pagination. If
feature enabled (bLengthChange) then the end user will be able to
override this to a custom setting using a pop-up menu.
$(".table-togglable").DataTable({
bLengthChange: true,
"lengthMenu": [ [10, 15, 25, 50, 100, -1], [10, 15, 25, 50, 100, "All"] ],
"iDisplayLength": 50,
bInfo: false,
responsive: true,
"bAutoWidth": false
});
Result: https://jsfiddle.net/cmedina/7kfmyw6x/50/