I am using the data table, In which one column contains input field. Now the problem is when I tried to update this field if the pagination is there only the current page data is submitting instead of all fields
Any solution here?
Code Snippet:
<form method="POST">
<div class="table-responsive">
<table id="dataTablesFullDesc" class="table table-striped table-hover">
<thead>
<tr>
<th>
<?php _e('ID'); ?>
</th>
<th>
<?php _e('Project Name');?>
</th>
<th>
<?php _e('Status'); ?>
</th>
<th>
<?php _e('Assigned To'); ?>
</th>
<th>
<?php _e('Assigned By')?>
</th>
<th>
<?php _e('Estimated Time'); ?>
</th>
<th>
<?php _e('Time spent ');?><i class="fa fa-exclamation-circle" data-toggle='tooltip' title='<?php echo __("It will show time spent for today.") ?>'></i></th>
<?php if($isEmployee) { ?>
<th>
<?php _e('Hours Worked today')?>
</th>
<?php } ?>
</tr>
</thead>
<?php if($isAdmin){ ?>
<tbody>
</tbody>
<?php }else{ ?>
<tbody>
<?php $i = 0 ;?>
<?php foreach ($issues as $issue) { ?>
<tr>
<td>
<?php echo $issue['id']; ?>
</td>
<td>
<?php if($issue['projectid'] != 0) { ?>
<a href='<?php if(in_array("manageProject",$perms)) { ?>?route=projects/manage&id=<?php echo $issue[' projectid ']; ?><?php } else echo "#"; ?>'>
<span><?php echo getSingleValue("projects","name",$issue['projectid']); ?> </span>
</a>
<?php }else{ ?>
<a href='#'>
<?php _e('None'); ?>
</a>
<?php } ?>
</td>
<input type="hidden" name="taskid[]" id="taskid" value="<?php echo $issue['id'] ?>">
<input type="hidden" name="timespent[]" id="timespent" value="<?php echo $issue['timespent'] ?>">
<td><b><?php echo $issue['name']; ?></b></td>
<td>
<?php if($issue['status'] == "To Do") echo "<span class='badge bg-green'>".__("To Do")."</span>"; ?>
<?php if($issue['status'] == "In Progress") echo "<span class='badge bg-blue'>".__("In Progress")."</span>"; ?>
<?php if($issue['status'] == "Done") echo "<span class='badge bg-gray'>".__("Done")."</span>"; ?>
<?php if($issue['status'] != "Done" && date('Y-m-d H:i', $issue['duedate']) < date('Y-m-d H:i') && $issue['duedate'] != "" || $issue['timespent'] > $issue['estimated_hrs']) echo "<span class='badge bg-red'>".__("Overdue")."</span>"; ?>
</td>
<!--<td><?php if($issue['duedate'] != "") echo date('d-m-Y h:i A', $issue['duedate']); else echo "<span class='text-muted'>".__("None")."</span>" ?></td>-->
<td>
<?php if($issue['adminid'] != 0) echo getSingleValue("people","name",$issue['adminid']); else echo "<span class='text-muted'>".__("Nobody")."</span>"; ?></td>
<td>
<?php if($issue['assignid'] != 0) echo getSingleValue("people","name",$issue['assignid']); else echo "<span class='text-muted'>".__("Nobody")."</span>"; ?></td>
<td>
<?php echo min_to_hours($issue['estimated_hrs']);?> Hours</td>
<?php $timesheets[$issue['id']] = isset($timesheets[$issue['id']])? $timesheets[$issue['id']]:0; ?>
<td>
<?php echo min_to_hours($timesheets[$issue['id']]); ?> Hours</td>
<?php if($isEmployee){ ?>
<td style="width: 14%;">
<div class="col-xs-12">
<div class="form-group">
<div class="input-group">
<input type="number" class="form-control" id="totalwork" name="totalwork[]" min="0.00" step="0.01" value="<?php echo $timesheets[$issue['id']]/60; ?>">
<input type="hidden" name="prevtimespent[]" value="<?php echo $timesheets[$issue['id']]; ?>" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>
</div>
<?php if(isset($_GET['date'])){ ?>
<input type="hidden" id="dateadded" name="dateadded" value="<?php echo $_GET['date']; ?>">
<?php } ?>
<input type="hidden" name="action" value="updateTimesheet">
<input type="hidden" name="route" value="issues/all&date=<?php echo $_GET['date']; ?>">
<input type="hidden" name="routeid" value="">
<input type="hidden" name="section" value="">
<?php if($isEmployee){ ?>
<!--month dropdown-->
<?php if(isset($_GET['peopleid'])){
$peopleid = $_GET['peopleid'];
}else{
global $liu;
$peopleid = $liu['id'];
} ?>
<div class="pull-left">
<select class="form-control select2 select2-hidden-accessible " onchange="window.location.href='?route=issues/all&date='+this.value+'&peopleid='+<?php echo $peopleid; ?>" id="respondid" name="respondid" style="width: 100%;" tabindex="-1" aria-hidden="true">
<?php global $date;
for($i=1;$i<=12;$i++){
$m = str_pad($i, 2, '0', STR_PAD_LEFT);
echo $first_date = date('Y-'.$m.'-01');
echo $last_date = date('Y-'.$m.'-t');
$_GET['date'] = isset($_GET['date'])? $_GET['date']: date('Y-m-d');
?>
<option value="<?php echo date('Y-'.$m.'-01');?>" <?php if(($first_date <= $_GET['date']) &&($last_date >= $_GET['date']) ) {echo "selected";} if((!$_GET['date']) && ($first_date <= $date) &&($last_date >= $date) ){echo "selected";}?> ><?php echo date('M', mktime(0, 0, 0, $i, 1)); ?> </option>
<?php } ?>
</select>
</div>
<?php } ?>
<?php $previousDate = strftime('%Y-%m-%d',(strtotime($timesheetDaysUpdate.'days ago')));?>
<!--check the limit for update limit or restrict user to upload others timesheet-->
<?php if((!isset($_GET['peopleid'])) || $liu['id'] == $_GET['peopleid']){ ?>
<?php if(isset($_GET['date']) && $_GET['date']<=$previousDate){ ?>
<div class="pull-right"><button type="submit" class="btn btn-danger btn-sm" disabled><i class="fa fa-hourglass-half"></i> <?php _e('UPDATE TIME SHEET'); ?></button></div>
<?php }else{ ?>
<div class="pull-right"><button type="submit" class="btn btn-danger btn-sm"><i class="fa fa-hourglass-half"></i> <?php _e('UPDATE TIME SHEET'); ?></button></div>
<?php }}?>
</form>
I am using an array for input fields to submit the data.if the form is spread over pages then it's only catching the data for the current page
You're not updating your underlying data so that is probably your issue. I've had a small play and this looks like it might get you started:
var table = $('#example').DataTable({
columnDefs: [{
targets: [2],
render: function(data, type, row, meta) {
return `<input class="form-control totalwork" min="0.00" step="0.01" type="number" value="${data}" />`
},
orderDataType: "dom-value"
}]
});
$(".btn-primary").click(function() {
console.log(table.data())
});
$(".totalwork").on("change", function() {
var cell = table.cell($(this).parent("td"));
cell.data($(this).val());
})
$.fn.dataTable.ext.order['dom-value'] = function(settings, col) {
return this.api().column(col, {
order: 'index'
}).nodes().map(function(td, i) {
return $('input', td).val();
});
};
I'd also get your datatable to do more of the work! Here's a working example.