我的页面中有数据表,我想在表中添加排序,但它不起作用。
查看:
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
<style>
.highlight { background-color: #1DA5FF; color:#fff; }
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
<style type="text/css" media="screen">
td{
padding: 0;
}
</style>
<form role="form" id="print_booking_register" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="booking_register_table" class="table table-bordered table-sm" style=" overflow: auto;"> </table>
</div>
</div>
</section>
</form>
<button id="print" name="print" onclick="printContent('print_booking_register')" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print Booking Register</button>
<!-- DataTables -->
<script src="<?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.js"></script>
<script href=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script src=" <?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script href=" https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script href=" https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script>
$(document).ready(function() {
$('#booking_register_table').dataTable({
order: [[ 3, 'desc' ], [ 0, 'asc' ]]
});
});
</script>
<script>
function printContent(e1) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:not(:checked').each(function() {
allVals.push($(this).val());
});
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css({
display:'none'
});
});
});
$('#print').css('visibility', 'hidden'); //hiding print button on print page
$('input[name=selectedrecord]').css('visibility', 'hidden'); //hiding Check box on print page
var restorepage = document.innterHTML;
var printContent = document.getElementById(e1).innterHTML;
document.innterHTML = printContent;
window.print();
document.location.href = "<?php echo base_url(); ?>";
location.href="<?php echo base_url(); ?>booking/report/booking_register/BookingRegisterController/bookingRegister", 'refresh';
}
</script>
</body>
</html>
控制器:
$modelResult = $this->reportModel->bookingRegisterReportByLrno($data);
?>
<table id="bilty_table" class="table table-bordered table-striped table-sm" style=" overflow: auto;">
<thead>
<tr>
<th class="col2"><input type="checkbox" name="selectedrecord" value="2">LR No</th>
<th class="col3"><input type="checkbox" name="selectedrecord" value="3">Consignor Name</th>
</tr>
</thead>
<tbody>
<?php foreach($modelResult as $bilty){?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
</tr>
<?php }?>
</tbody>
</table>
在我的代码中添加了jquery文件,但我对此不支持。
我不知道我的代码哪里错了。
我尝试此代码,但无法正常工作。
我的控制器中有表格,并且在查看页面中显示