【发布时间】:2021-05-29 11:14:34
【问题描述】:
我有一个日期范围选择器,它可以正常工作。但是,我有一个 新目标,它是 daterange with timepicker。但问题是我不知道如何实现它,就像我在没有时间选择器的情况下在日期范围上所做的那样。有什么方法可以实现吗?我在我的完全工作的日期范围选择器下面提供了我的代码。我还使用时间选择器提供了我当前日期范围和目标日期范围的屏幕截图。提前谢谢你。
HTML:
<div class="img-fluid">
<div class="input-group">
From:
<input type="date" class="mr-4" id="from" name="from">
To:
<input type="date" id="to" name="to" style="margin-right:50px;">
</div>
</div>
<div class="tab-pane fade show active" id="custom-tabs-two-1" role="tabpanel" aria-labelledby="custom-tabs-two-1-tab">
<table id="testing" class="table-striped table table-head-fixed" style="min-width:1000px; width:100%;">
<thead class="" style="background-color: #404040; color: white;">
<tr>
<th scope="col"><i class="fas fa-list-ol mr-2"></i>Transaction ID</th>
<th scope="col"><i class="fas fa-list-ol mr-2"></i>Reference No.</th>
<th scope="col"><i class="far fa-calendar-alt mr-2"></i>Date Requested</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
脚本和 Ajax:
var save_method; //for save method string
var table;
var base_url = '<?php echo base_url();?>';
$(document).ready(function() {
//datatables
var table = $('#testing').DataTable({
dom: 'lBfrtip',
buttons: [
'print', 'csv', 'copy', 'excel', 'pdfHtml5'
],
"processing": false, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('controller/ajax_list')?>",
"type": "POST",
"data": function ( data ) {
data.from = $('#from').val();
data.to = $('#to').val();
},
},
//Set column definition initialization properties.
"columnDefs": [
{
"targets": [ 0 ], //first column
"orderable": false, //set not orderable
},
{
"targets": [ -1 ], //last column
"orderable": false, //set not orderable
},
],
});
setInterval( function () {
testing.ajax.reload(null,false);
}, 1000);
控制器:
public function ajax_list()
{
$list = $this->repo->admin();
$data = array();
$no = $_POST['start'];
foreach ($list as $person) {
$no++;
$row = array();
$row[] = $person->transID;
$row[] = $person->refNumber;
$row[] = $person->dateRequested;
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->repo->showing_pending(),
"recordsFiltered" => $this->repo->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
}
型号:
var $table = 'ca';
var $column_order = array(null,'transID','dateRequested','refNumber');
var $order = array('transID' => 'desc');
var $column_search = array('transID','dateRequested','refNumber');
//set column field database for datatable orderable //set column field database for datatable searchable just firstname , lastname , address are searchable var $order = array('id' => 'desc'); // default order
private function _get_datatables_query()
{
if($this->input->post('from')){
$this->db->where('dateCre >=', $this->input->post('from'));
$this->db->where('dateCre <=', $this->input->post('to'));
}
$this->db->from('ca');
$i = 0;
foreach ($this->column_search as $item)
{
if($_POST['search']['value'])
{
if($i===0) // first loop
{
$this->db->group_start();
$this->db->like($item, $_POST['search']['value']);
}
else
{
$this->db->or_like($item, $_POST['search']['value']);
}
if(count($this->column_search) - 1 == $i)
$this->db->group_end();
}
$i++;
}
if(isset($_POST['order']))
{
$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else if(isset($this->order))
{
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}
function admin()
{
$this->_get_datatables_query();
if($_POST['length'] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
}
public function showing_pending()
{
$this->db->from($this->table);
return $this->db->count_all_results();
}
function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}
}
【问题讨论】:
标签: ajax codeigniter codeigniter-3