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.
Related
Is there any possibility to create DataGrid cell with FileUpload associated with row.
For example I have database with records and I want to have a possibility to attach files to selected records.
Is someone know how to do that and can share with me ;)
Thanks a lot for your help :D
Do you mean something like this:
A simple demo:
<div class="demo-container">
<div id="gridContainer"></div>
</div>
<script>
$(function () {
var customers = [{
"ID": 1,
"CompanyName": "Premier Buy",
"Address": "7601 Penn Avenue South",
}, {
"ID": 2,
"CompanyName": "ElectrixMax",
"Address": "263 Shuman Blvd",
}, {
"ID": 3,
"CompanyName": "Video Emporium",
"Address": "1201 Elm Street",
}]
$("#gridContainer").dxDataGrid({
dataSource: customers,
showBorders: true,
columns: ["CompanyName", "Address", {
dataField: "COLUNIQID",
alignment: 'center',
caption: "Actions",
cellTemplate: function (container, options) {
$('<input type="file" />')
.on('change', function () {
//do the upload here
})
.appendTo(container);
}
}]
});
});
</script>
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,
My snippets below shows a datatables example that has 3 rows, I have added an extra column in column definition "action" and I m setting its display/data via default content and render functions respectively.
every time I try to build an JSON data containing the column "action" val i fail. I added the cell click listener (disabled in this action) just to make sure that the data is stored in the API data collection and it is indeed, yet it fails to show up after building the values.
if you click "build vals" you will see how the "action" data is not included in JSON. if you click "Mark for delete" and then "build vals" the "action" data will show up.
any idea how to make it work?
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data: [{
"RecID": 2383,
"PtFilenum": 15090248,
"PrtFilenum": 13090701,
"Fullname": "Salem",
"PrtStatus": 1
}, {
"RecID": 2384,
"PtFilenum": 15090248,
"PrtFilenum": 15120996,
"Fullname": "Tony",
"PrtStatus": 1
}, {
"RecID": 2385,
"PtFilenum": 15090248,
"PrtFilenum": 170227111,
"Fullname": "Jorge",
"PrtStatus": 1
}],
order: [2, 'asc'],
keys: {
columns: ':not(:first-child)',
keys: [9]
},
columns: [
{ // Checkbox select column
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
"width": "1%"
},
{
"width": "50%",
data: "RecID",
"visible": false
},
{
"width": "50%",
data: "PtFilenum",
"visible": false
},
{
"width": "10%",
data: "PrtFilenum"
},
{
"width": "40%",
data: "Fullname"
},
{
"width": "10%",
data: "PrtStatus",
render: function(data, type, row) {
if (type === 'display') {
if (data == 1) {
return 'Partners';
} else {
return 'Not Partners';
}
}
return data;
},
className: "dt-body-center"
},
{
"width": "10%",
data: 'action',
defaultContent: 'update',
orderable: false,
className: "dt-body-center",
"visible": true,
render: function(data, type, row) {
if (data == null) {
return 'update';
} else {
return data;
}
}
},
],
});
/* $('#RegSrc tbody').on('click', 'td', function () {
console.log(tablenest.cell(this).data());
});*/
$("#btn1").click(function() {
tablenest.rows({
selected: true
}).every(function(rowIdx, tableLoop, rowLoop) {
tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
var row = tablenest.row(this).node();
$(row).css('color', 'red').animate({
color: 'black'
});
});
return false;
})
$("#btn2").click(function() {
var tbldta = $.map(tablenest.rows().data(), function(d, i) {
var myObject = new Object();
myObject = {
action: d.action,
RecID: d.RecID,
PrtStatus: d.PrtStatus,
ptfilenum: d.PtFilenum,
PrtFilenum: d.PrtFilenum
}
return myObject
});
var DtaObj = {}
DtaObj.Data = tbldta
console.log(JSON.stringify(DtaObj))
return false;
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>
<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>click here to select</th>
<th><b>RecID</b></th>
<th><b>Patient File Number</b></th>
<th><b>Partner File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
<th><b>action</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Include "action":"update" to your data source in constructor.
columns.defaultContent is static and therefore cannot possibly access
the data.
Also you can remove render from "action" column.
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data: [{
"RecID": 2383,
"PtFilenum": 15090248,
"PrtFilenum": 13090701,
"Fullname": "Salem",
"PrtStatus": 1,
"action": "update"
}, {
"RecID": 2384,
"PtFilenum": 15090248,
"PrtFilenum": 15120996,
"Fullname": "Tony",
"PrtStatus": 1,
"action": "update"
}, {
"RecID": 2385,
"PtFilenum": 15090248,
"PrtFilenum": 170227111,
"Fullname": "Jorge",
"PrtStatus": 1,
"action": "update"
}],
order: [2, 'asc'],
keys: {
columns: ':not(:first-child)',
keys: [9]
},
columns: [
{ // Checkbox select column
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
"width": "1%"
},
{
"width": "50%",
data: "RecID",
"visible": false
},
{
"width": "50%",
data: "PtFilenum",
"visible": false
},
{
"width": "10%",
data: "PrtFilenum"
},
{
"width": "40%",
data: "Fullname"
},
{
"width": "10%",
data: "PrtStatus",
render: function(data, type, row) {
if (type === 'display') {
if (data == 1) {
return 'Partners';
} else {
return 'Not Partners';
}
}
return data;
},
className: "dt-body-center"
},
{
"width": "10%",
data: 'action',
orderable: false,
className: "dt-body-center",
"visible": true
},
],
});
/* $('#RegSrc tbody').on('click', 'td', function () {
console.log(tablenest.cell(this).data());
});*/
$("#btn1").click(function() {
tablenest.rows({
selected: true
}).every(function(rowIdx, tableLoop, rowLoop) {
tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
var row = tablenest.row(this).node();
$(row).css('color', 'red').animate({
color: 'black'
});
});
return false;
})
$("#btn2").click(function() {
var tbldta = $.map(tablenest.rows().data(), function(d, i) {
var myObject = new Object();
console.log(d);
myObject = {
action: d.action,
RecID: d.RecID,
PrtStatus: d.PrtStatus,
ptfilenum: d.PtFilenum,
PrtFilenum: d.PrtFilenum
}
return myObject
});
var DtaObj = {}
DtaObj.Data = tbldta
console.log(JSON.stringify(DtaObj))
return false;
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>
<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>click here to select</th>
<th><b>RecID</b></th>
<th><b>Patient File Number</b></th>
<th><b>Partner File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
<th><b>action</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
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 am trying to print current filter from jQuery DataTable to a PDF.
I am searching for a solution but usually results are for TableTools but it's retired, so I am using Buttons.
With TableTools, I tried to apply this code:
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copy to clipboard",
"oSelectorOpts": {
page: 'current'
}
}
]
}
} );
From here https://datatables.net/extensions/tabletools/button_options#oSelectorOpts
And this is my code:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
download: 'open'
}
]
} );
} );
Already tried to change many times, still prints all the rows. What am i doing wrong?
You need to do something like this:
`
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"pagingType": "full_numbers",
"iDisplayLength": 10,
"dom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{'sExtends':'copy',
"oSelectorOpts": { filter: 'applied', order: 'current' },
},
{'sExtends':'xls',
"oSelectorOpts": { filter: 'applied', order: 'current' },
},
{'sExtends':'print',
"oSelectorOpts": { filter: 'applied', order: 'current' },
}
]
},
});
});
</script>