serverSide causing table to return to the top after edit?
serverSide causing table to return to the top after edit?
I have two identical scripts on the test server.
One has serverSide enabled, the other doesn't. When I edit on the server side file, the table scrolls to the top, when I edit on the client side one, it doesn't. Both use the same ajax call.
test pages can be found here:
serverSide: https://test.assettrack.cx/asset/displayAssets_ss.php
clientSide: https://test.assettrack.cx/asset/displayAssets_cs.php
The code for the files is below, but apart from serverSide they are (should be) identifcal.
serverSide:
<?php
if(isset($_GET['loc'])) {
$loc = clean($_GET['loc']);
$loc = escape($loc);
$_SESSION['loc'] = $loc;
$sql = "SELECT docWBS FROM loc WHERE id = $loc";
$result = query($sql);
$row = mysqli_fetch_array($result);
$_SESSION['docWBS'] = $row[0].'%';
} else {
$_SESSION['loc'] = null;
$loc = null;
$_SESSION['docWBS'] = null;
}
if(isset($_GET['disc'])) {
$disc = clean($_GET['disc']);
$disc = escape($disc);
$_SESSION['disc'] = $disc;
} else {
$_SESSION['disc'] = null;
$disc = null;
}
if(isset($_GET['at'])) {
$at = clean($_GET['at']);
$at = escape($at);
$_SESSION['at'] = $at;
} else {
$_SESSION['at'] = null;
$at = null;
}
if(isset($_GET['ss'])) {
$ss = clean($_GET['ss']);
$ss = escape($ss);
$_SESSION['ss'] = $ss;
} else {
$_SESSION['ss'] = null;
$ss = null;
}
if(isset($_GET['e'])) {
$e = clean($_GET['e']);
$e = escape($e);
$_SESSION['e'] = $e;
} else {
$_SESSION['e'] = null;
$e = null;
}
if(isset($_GET['g'])) {
$g = clean($_GET['g']);
$g = escape($g);
$_SESSION['g'] = $g;
} else {
$_SESSION['g'] = null;
$g = null;
}
if(isset($_GET['status'])) {
$status = clean($_GET['status']);
$status = escape($status);
$_SESSION['status'] = $status;
} else {
$_SESSION['status'] = null;
$status = null;
}
?>
<header class='container-fluid page-header text-center'>
<h1 class='page-title'>Assets</h1>
</header>
<div class="d-lg-none text-center mx-2"><h4 class="text-danger">This page is not designed to be read on a small screen</h4></div>
<?php
display_message();
?>
<input type="hidden" id='role' value="<?php echo $role ?>">
<div class="container-fluid ms-7 w-auto">
<div class="card">
<div class="card-body">
<div id='phaseTable' class='content'>
<table id='example' class='stripe row-border order-column' style="width:100%">
<thead>
<tr>
<th data-priority="20" class='text-center'>Drawing ID</th>
<th data-priority="30" class='text-center'>Spec Tag</th>
<th data-priority="20" class='text-center'>Location</th>
<th data-priority="20" class='text-center'>Building</th>
<th data-priority="40" class='text-center'>Room</th>
<th data-priority="40" class='text-center'>Level</th>
<th data-priority="50" class='text-center'>Type</th>
<th data-priority="60" class='text-center'>Entity</th>
<th data-priority="100" class='text-center'>Design</th>
<th data-priority="70" class='text-center'>Status</th>
<th data-priority="600" class='text-center'>Old ID</th>
<th data-priority="80" class='text-center'>PICO Status</th>
<th data-priority="90" class='text-center'>SAT Status</th>
<th data-priority="95" class='text-center'>Spec</th>
<th data-priority="92" class='text-center'>Subsystem</th>
<th data-priority="200" class='text-center'>Discipline</th>
<th data-priority="200" class='text-center'>PICO</th>
<th data-priority="300" class='text-center'>SAT</th>
<th data-priority="400" class='text-center'>BIC</th>
<th data-priority="500" class='text-center'>Phase</th>
<th data-priority="31" class='text-center'>Seq</th>
<th data-priority="1500" class='text-center'>Comments</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" class="init">
var editor;
var permission = '<?php echo $role ?>';
var client = '<?php echo $client ?>';
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: "../ajax/at/assets.php",
table: "#example",
fields: [
{
label: 'Location',
name: 'A.loc',
type: 'select',
placeholderDisabled: false,
placeholder: "Select location"
}, {
label: 'Design Tag',
name: 'designTag'
}, {
label: 'Room',
name: 'room'
},
{
label: 'Building',
name: 'A.building',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose Building (Optional)"
},
{
label: 'Level',
name: 'A.levels',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose Level"
},
{
label: 'Asset Type',
name: 'A.assetType',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose Asset Type"
}, {
label: 'Entity',
name: 'A.entity',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose entity"
}, {
label: 'Drawing',
name: 'design'
}, {
label: 'Status',
name: 'A.assetStatus',
type: 'select',
placeholderDisabled: false,
placeholder: "Select asset Status"
}, {
label: 'Old ID',
name: 'oldID',
multiEditable: false
}, {
label: 'Subsystem',
name: 'subsystem',
type: 'hidden'
},
{
label: 'PICO Report',
name: 'A.picoReport',
type: 'select',
placeholderDisabled: false,
placeholder: "Select PICO Report"
},
{
label: 'PICO Status',
name: 'A.picoReportStatus',
type: 'select',
placeholderDisabled: false,
placeholder: "PICO Report Status"
},
{
label: 'SAT Report',
name: 'A.satReport',
type: 'select',
placeholderDisabled: false,
placeholder: "Select SAT Report"
},
{
label: 'SAT Status',
name: 'A.satReportStatus',
type: 'select',
placeholderDisabled: false,
placeholder: "SAT Report Status"
}, {
label: 'Updated By',
name: 'A.updatedBy',
type: 'hidden'
}, {
label: 'Ball in court',
name: 'A.bic',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose person (Optional)"
},
{
label: 'Phase',
name: 'A.phase',
type: 'select',
placeholderDisabled: false,
placeholder: "Choose phase (Optional)"
},
{
label: 'Sequence ID',
name: 'seq',
},
{
label: 'Comments',
name: 'A.comment',
type: 'textarea'
},
],
formOptions: {
main: {
scope: 'cell' // Allow multi-row editing with cell selection
}
},
} );
var table = $('#example').DataTable( {
dom: 'lBfrtip',
serverSide: true,
processing: true,
ajax: {
url: "../ajax/at/assets.php",
type: "POST",
deferRender: true,
},
//TABLE WINDOW
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
left: 2
},
columns: [
{ data: "designTag",
className: "dt-nowrap",
},
{ data: "specTag",
className: "dt-nowrap",
},
{ data: "L.LocationName" },
{ data: "B.buildingTLA" },
{ data: "room" },
{ data: "L1.levelTLA" },
{ data: "T.assetType" },
{ data: "E.entityTLA" },
{ data: "design",
className: "dt-nowrap",
},
{ data: "S.assetStatus" },
{ data: "oldID" },
{ data: "PR" },
{ data: "SR" },
{ data: "T.spec",
className: "dt-nowrap",
},
{ data: "subsystem" },
{ data: "D.discipline" },
{ data: "PICO",
className: "dt-nowrap",
},
{ data: "SAT",
className: "dt-nowrap",
},
{ data: "U.username" },
{ data: "P.assetPhase" },
{ data: "seq" },
{ data: "A.comment" },
],
columnDefs:[
{
searchPanes: {
show: false
},
targets: [0,1,2,8,10,13,20,21]
}
],
//SHOW SELECTION & SAVE PREVIOUS STATE
select: true,
stateSave: true,
//DISABLE AUTOWIDTH
"autoWidth" : false,
//BUTTONS
buttons: [],
//PAGINATION OPTIONS
"pageLength": 250,
"lengthMenu": [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],
} );
table.button().add(
null, { extend: "edit", editor: editor },
);
} );
</script>
ClientSide is the same but serverSide is false.
Any idea why I have the issue?
Debug scrip shows all files up to date.
configuration data uploaded. https://debug.datatables.net/idimaw
This question has an accepted answers - jump to answer
Answers
The controller is:
This thread should help, it's asking the same thing.
Cheers,
Colin
Thanks Colin,
I did look at that and the drawType, Loren uses inline editing, which I don't. And Allan did say he was looking to update this in the package so I thought it may be another issue.
When I use the drawType with an inline fuction, I don't have any issues, the table stays where it is.
I tried creating the function without inline editing as:
When I do this there is no change to the behaviour and after update the page returns to the top. Did I miss something?
That's close, but in the wrong place, I think. On line 245 of your code above, add:
I tried it locally here and it's not resetting the scroll position, so hopefully that'll do the trick for you,
Colin
Thanks Colin, I'll add that when I get home tonight and if all good mark it as the answer, appreciate the help.
Worked perfectly thanks, for those using this as reference and copying, note the missing comma after 'cell'.
Thanks Colin.
Good to hear, thanks for reporting, and comma added in the example above
Colin