I want to change datatable show entry position in my project by default it is on top left but i want to bottom right.
this is my datatable position code:
$('#ebayebuygumm').DataTable({
"sDom": 'Lfrtlip',
"columnDefs": [
{
"targets": [0,-1], //first column / numbering column
"orderable": false, //set not orderable
},
],
"lengthMenu": [[10, 50, 100, 250], [10, 50, 100, 250]],
"order": [[ 2, "asc" ]]
});
$('#ebayebuygumm').DataTable({
"sDom": '<"top"f>rt<"bottom"pli>',
"columnDefs": [
{
"targets": [0,-1], //first column / numbering column
"orderable": false, //set not orderable
},
],
"lengthMenu": [[10, 50, 100, 250], [10, 50, 100, 250]],
"order": [[ 3, "asc" ]]
});
and also this css
#ebayebuygumm_paginate{
float: right;
}
#ebayebuygumm_length{
float: right;
margin-right: 12px;
}
"sDom": '<"top"f>rt<"bottom"pli>',
by this you can change position of dom
Related
I'm using Datatables and encoutered problem with the reponsiveness of the datatables with the size of columns.
When datatables are defined the size of column, that is bigger and the last column of the table is no displayed.
So I have tried to add a CSS class with a max-width, but it is not working.
HTML :
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<table class = "display" id = "datatable"></table>
CSS :
.cell_table {
max-width: 250px;
}
JS :
$('#datatable').DataTable({
"sPaginationType" : "full_numbers",
"columnDefs" : [{
"targets": "_all",
"createdCell" : function (td, cellData, rowData, row, col) {
$(td).attr('id', 'cell-' + col);
},
}, {
"targets" : [0, 1, 2, 3],
"className" : "text_center cell_table",
}],
"lengthMenu" : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
"iDisplayLength" : -1,
data : data_use,
columns : column_name,
dom : 'lfrtip',
responsive : true,
destroy : true,
searching: true,
});
Here you can find the code on JSfiddle.
You are doing something wrong, setting className twice which apparently not correct.
Fiddle
$('#datatable').DataTable({
"sPaginationType" : "full_numbers",
"columnDefs" : [{
"targets": "_all",
"createdCell" : function (td, cellData, rowData, row, col) {
$(td).attr('id', 'cell-' + col);
},
}, {
"targets" : [0, 1, 2, 3],
"className" : "text_center cell_table",
}],
"lengthMenu" : [[5, 10, 25, -1], [5, 10, 25, "All"]],
"iDisplayLength" : 25,
data : data_use,
columns : column_name,
dom : 'lfrtip',
responsive : true,
destroy : true,
searching: true,
});
CSS:
.text_center{
text-align : center;
}
.cell_table {
max-width : 250px;
}
.dataTable{
width:100%;
max-width:100%;
}
I have a Datatable with fixed header on vertical scroll and first 2 columns fixed on horizontal scroll.When I scroll down vertically and then try to horizontally scroll the datatable. The headers don't scroll according to the data(headers remain fixed). Can someone help me on this?
Here is the JsFiddle
JS Code:
var table = $('#example').DataTable({
"iDisplayLength": 50,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"order": [[ 0, "asc" ]],
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {
"leftColumns": 2,
},
"sScrollXInner": "150%",
"fixedHeader": true,
"drawCallback": function (settings) {
var api = this.api();
var visibleRows = api.rows({ page: 'current' }).data();
},
});
I'm using this plugin here https://www.datatables.net/ along side jQuery.2.1.4.
I'm also trying to utilize functionality provided by both https://www.datatables.net/manual/styling/jqueryui and https://jqueryui.com/
However i keep getting the following error
Uncaught TypeError: Cannot read property 'defaults' of undefined
The code throwing that error is below & its in java-script file "dataTables.jqueryui.js" which i downloaded from here https://www.datatables.net/manual/styling/jqueryui
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
EDIT:
Below is how i'm initializing my tables
var oTable;
function TableSorter(arr) {
if (arr == 'Custome') {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else if (arr == null) {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": arr }],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
};
The problem was being cause by loading "jquery-ui.js" before "jquery.dataTables.js".
I modified my #Scripts.Render('') order in my shared view such that "jquery.dataTables.js" is loaded first before "jquery-ui.js" and that resolved the problem.
Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!
Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table
You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});
I'm new with plugin DataTables in js, and i didn't find how i can select specific data to be sorted in a column. For example, in my table, i've a column with "Rating". I'd like to sort it only with the percentage and not with the other values.
<td>
<span class="rating">100.00%</span>
<span class="voteup">3 <img src='/images/voteup.png' alt='voteup' /></span>
<span class="votedown"> 0 <img src='/images/votedown.png' alt='votedown' /></span>
<br />
<span class="comment">0 comments</span> <br/>
<span class="views">17 views</span>
</td>
I load data directly from the dom (generated by php), here is my DataTables generation in js.
var oTable;
$(document).ready(function() {
oTable = $('#BuildList').dataTable({
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"iDisplayLength": -1,
"aoColumns": [
{ "bSortable": false},
{ "bSortable": false},
{ "bSortable": false},
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc" ] },
]
});
// To sort by default the column 4
oTable.fnSort([[3, 'asc']]);
});
Problem solved
$.fn.dataTableExt.oSort['rating-desc'] = function(x,y) {
x = parseFloat($(x).first().html());
y = parseFloat($(y).first().html());
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
$(document).ready(function() {
oTable = $('#BuildList').dataTable({
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"iDisplayLength": -1,
"aoColumns": [
{ "bSortable": false},
{ "bSortable": false},
{ "bSortable": false},
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc" ], "sType": "rating" }
]
});
// To sort by default the column 4
oTable.fnSort([[3, 'asc']]);
});