Im using datatables (server side randering) with checkbox plugin from Gyrocode.
var dTable2 = $('table.contracts-search-results').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "${someURL}",
"type": "POST",
"data": function (d) {
d.returnEmptyResult = '${returnEmptyResult}';
},
},
searching: false,
"dom": '<"top"iplB<"clear">>rt<"bottom"iplB<"clear">>',
paging: true,
pageLength: 0,
displayStart: 50,
"pagingType": "input",
info: true,
"buttons": [],
"order": [],
"columnDefs":
{"targets": 7,
"width": "75px",
checkboxes: {
"selectRow": true,
"selectAll": false
},
"stateSave": true,
'createdCell': function (td, cellData, rowData, row, col){
var $this = this;
var selectedCon = '${con}';
var arrayOfCon = selectedCon.replace(/[\[\]\s']+/g, '').split(",");
$.map(arrayOfSelectedCon, function(conId, index) {
if(cellData == conId) {
$this.api().cell(td).checkboxes.select();
}
});
},
},
{
"targets": [14, 15, 16],
"visible": false
},
],
"select": {
"style": "multi",
},
"language": {
"decimal": ",",
"thousands": ".",
"url": themeUrl+"js/libs/dataTable/lang/german.json"
},
}
}) ;
I have to pages. On first one I have datatables with configuration posted above. Second page I have another datatables with similar configuration. When user get to second page and choose some rows using checkboxes Im creating list od Ids and when user go back to first page I send Ids from second page to first one and select checkboxes on first page based on Ids from secound page.
The problem is that its working fine If all rows were on the same table page, but when user on secound page used pagination it doesnt work.
use statesave: false as given,
"stateSave": false,
Related
I have a JQuery DataTable. Fpr each row I have a button and when the user clicks on it, it should show related fields in a modal in order to edit that row. Now my problem is I can't get the selected row id and it returns undefined. Here is my code:
$("#myDummyTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false,
//"searching": false,
"language": {
"url": "/language/Persian.json"
},
"ajax": {
"url": "Data/GetData",
"type": "POST",
"datatype": "jason"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
rowId: "id",
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "startDate", "name": "StartDate", "autoWidth": true },
{ "data": "endDate", "name": "EndDate", "autoWidth": true },
{
defaultContent: '<input type="button" class="Edit" value="edit"/>
}
]
});
$('#myDummyTable tbody').on('click', '.Edit', function () {
var row = myDummyTable.row(this).rowId;
var myDummyTable = $('#myDummyTable').DataTable();
console.log('row:' + myDummyTable.row(this).rowId);
});
});
Instead of using the defaultContent column option, you can use a render function. This allows you to customize each button so it can include the relevant ID:
{ data: "id", render: function ( data, type, row, meta ) {
return '<input type="button" class="Edit" id="' + data + '" value="edit id ' + data + '"/>';
}
}
Here we first use data: id again (same as for the first column). This means this column will use the id value.
Then we use the render function which gives us access to the id value via the data variable.
In my example I added the ID to the text used by each button.
I also added an id attribute to each of these cells, using the same data value. This assumes each ID is unique, of course.
My test data - an example of one row:
{
"id": "5",
"name": "Airi Satou",
"start_date": "2008/11/28",
"office": "Tokyo"
}
In this case, Airi Satou's ID is 5.
My test table:
Now, when I click on a button, the following code will print the related ID:
$('#myDummyTable tbody').on('click', '.Edit', function () {
console.log( this.id );
});
I'm using datatables and I'd like to show an icon in a column (based on the value in the column data).
I've written a code like this:
$(document).ready(function() {
var oTable = $("#initiativeTable").DataTable({
"serverSide":true,
"processing":true,
"searching": false,
"ordering": true,
"order": [[ 0, "desc" ]],
"ajax": '${basePath}/cns/initiative/table.json?teams=${teams}&fields=${fields}&search=${search}',
"columns": [
{ "data": "id_init" },{ "data": "parent_name_init" },{ "data": "name_cust" },{ "data": "name_init" },{ "data": "code_paf" },{ "data": "name_team" },{ "data": "pa_name_emp" },{ "data": "pgm_name_emp" },{ "data": "pm_name_emp" },{ "data": "id_initstt" },{ "data": "description_contrtype" },{ "data": "description_inittype" },{ "data": "is_revised_init" }] ,
"columnDefs": [{ "targets": 12,
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == 'false' ) {
$(td).html("");
}else{
$(td).html("<span class='glyphicon glyphicon-ok'></span>");
}
}
}
});
});
The DataTables works fine but the column show the value of data, not the icon. If I reorder the table or go on second page of pagination, the createdCell works and the icon is showed.
It doesn't work only on the first load of the page.
What is the problem?
Thanks in advance
Cheers
Matteo
The syntax of createdCell is Inside columns, check columns.createCell:
columns: [
{
data : "name_data",
createCell: function(){
//code
}
}
]
You can use this code:
{
"data": "is_revised_init",
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData == 'false' ) {
$(td).html("");
}else{
$(td).html("<span class='glyphicon glyphicon-ok'></span>");
}
}
}
I have a dataTables table (http://communitychessclub.com/examine.php) of chess games (players, event, result, etc.) and the user can click on the row and up pops the game moves. But I want the user to be able to then press the back button and be returned to the row in the previous table from where the link to the current game was.
Any ideas?
My script init:
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="css/dataTable.css" />
<link rel="stylesheet" href="//cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css" />
<script async onload="myInit()" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script async onload="myInit()" src="//cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<script>
$(document).ready(function() {
$('#cccr').DataTable( {
"createdRow": function(row, data, index) {$(row).attr('game', data.game);},
"search": {"search": "<?php echo ($_GET['player']); ?>"},
"deferRender": true,
"oSearch": {"sSearch": "<?php echo ($_GET['player']); ?>"},
"aaSorting": [],
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sPaginationType": "full_numbers",
//"sScrollY": "24.15rem",
"responsive": true,
"bAutoWidth":true,
"autoWidth": true,
"stateSave": true,
"ajax": "assets/games.ajax",
"columns": [
{ "data": "Date", "width": "7rem", },
{ "data": "Event" },
{ "data": "ECO" },
{ "data": "White" },
{ "data": "WhiteElo" },
{ "data": "Black" },
{ "data": "BlackElo" },
{ "data": "Result" },
{ "data": "game", visible : false }
]
} );
$("#cccr").on("click", "tr", function() {
window.location.href = 'basic.php?game='+$(this).attr('game');
} );
} );
</script>
I'd suggest using this really rather cool extension. It should allow you to return to the same place you left. Alternatively you could always move the moves detail into a modal dialog...?
One possible solution, on page unload or in your on click action, grab the y position of the cursor. Save that in local/session storage and on return to the page, grab the value and move to that position.
The set-up:
DataTables is using remote data with pagination (AJAX-based)
YADCF is using a Select2 that's grabbing options using AJAX call
Selecting Select2 option triggers grid refresh and filtering (everything is correct)
The problem:
Right after DataTables pulls the updated rowset, YADCF re-runs its intialization routine and Select2 loses its state (i.e. the selected option is no longer selected and is not in the DOM anymore).
This:
becomes this after grid reloads (select2 control re-initialized and lost all options pulled via AJAX, including the one that was selected):
How can I avoid YADCF re-initialization in such case?
Having debugged the problem for a while I found that function appendFilters(...) is called after each grid refresh from this YADCF line:
https://github.com/vedmack/yadcf/blob/master/jquery.dataTables.yadcf.js#L3332
which, in turn is fired by DataTables' draw event.
Thanks!
EDIT:
DataTables config array:
var dataTableConfig = {
"autoWidth": false,
"deferLoading": 220,
"pageLength": 5,
"searchDelay": 0,
"searching": true,
"placeholder": null,
"ordering": true,
"paging": true,
"info": true,
"columns": [
{
"name": "company",
"data": {
"_": "company",
"filter": "company",
"display": "company"
},
"visible": true,
"searchable": true,
"orderable": true,
"className": "column_Company"
}
],
"showGlobalSearch": true,
"enableColumnFilter": true,
"columnFilterPosition": "table",
"resetPaging": true,
"select": {
"style": "single"
},
"serverSide": true,
"ajax": {
"url": "/datasource/",
"type": "post"
}
};
YADCF INIT:
colCfg = [
{
"column_number": 2,
"filter_type": "select",
"data": [],
"filter_default_label": "(select..)",
"enable_auto_complete": false,
"sort_as": "alpha",
"sort_order": "asc",
"filter_match_mode": "contains",
"exclude_label": "exclude",
"select_type": "select2",
"select_type_options": {
"width": "300",
ajax: {
url: '/datasource/',
dataType: 'json',
method: 'post',
delay: 750,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.results,
pagination: {
more: (params.page * 20) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatItem,
templateSelection: formatItemSelection,
escapeMarkup: function(v) {return v;}
},
"case_insensitive": true,
"filter_delay": 500
}
];
yadcf.init(dataTable, colCfg);
I have problem hiding jQuery datatable column. I want that column to retrieve data but I don't want it to be shown on the display page. I want to hide my column no 8 so from CSS I tried hiding it and it gives me collapsable div.
Below is my code for data table and class for hiding is "hideCol".
var userTable = $('#user').dataTable( {
"processing": true,
"serverSide": true,
"ajax":"admin/getData.php",
"responsive" : true,
"lengthMenu": [10, 25],
"paginationType" : "input",
columns: [
{ data:'param0'},
{ data: 'param1' },
{ data: 'param2' },
{ data: 'param3' },
{ data: 'param4' },
{ data: 'param5' },
{ data: 'param6' },
{ data: 'param7'},
],
fnRowCallback:function(nRow,aData, iDisplayIndex, iDisplayIndexFull){
var seenReportedVal =Number($('td:eq(7)', nRow).text());
$('td:eq(7)', nRow).addClass('hideCol');
if(seenReportedVal==0)
{
$(nRow).addClass('bold');
}
},
"columnDefs": [
{ "visible": false, "targets": 7 }
],
});
try using this code
var userTable = $('#user').dataTable( {
"processing": true,
"serverSide": true,
"ajax":"admin/getData.php",
"responsive" : true,
"lengthMenu": [10, 25],
"paginationType" : "input",
columns: [
{ data:'param0'},
{ data: 'param1' },
{ data: 'param2' },
{ data: 'param3' },
{ data: 'param4' },
{ data: 'param5' },
{ data: 'param6' },
{ data: 'param7'},
],
"columnDefs": [
{ "visible": false, "targets": [7] }
],
});
You may use visible property of columns.
I suggest enclose object attributes with quotes e.g. "columns", "data" or "visible".
"columns": [
{ "data":'param0'},
{ "data": 'param1', "visible": false},
{ "data": 'param2'},
{ "data": 'param3'},
{ "data": 'param4'},
{ "data": 'param5'},
{ "data": 'param6'},
{ "data": 'param7'},
]
I don't know if you already solved your problem, but since i had the same problem i will share with you at least my solution.
It looks you are using dataTable in Responsive Mode, so based on that, if you want to hide a column you have to apply specific css class for it, based on your need. You apply to the th element associated to the column, and you have your problem solved.
More info about the different css classes can be found here.
I have solved this with some css. Might be helpful for others.
"aoColumnDefs": [
{"sClass": "dt_col_hide", "aTargets": [3]}
],
dt_col_hide is a css class and it will hide column indexed 3 in this case.
.dt_col_hide{display: none;}
or
.dt_col_hide{visibility: hidden;}
as per your requirement.