Lấy dữ liệu đưa ra table
1. HTML
Chèn css
<link href="/vendor/datatables/extend/style_01.css" rel="stylesheet">
File:
Từ ngày: <input name="TuNgay" type="text" value="<iif-D>Url:tungay</iif-D>" />
Đến ngày: <input name="DenNgay" type="text" value="<iif-D>Url:denngay</iif-D>" />
<div class="btn-group">
<button id="btLoad" type="button" class="btn btn-danger">Nạp</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:napNgay('homnay')">Hôm nay</a>
<a class="dropdown-item" href="javascript:napNgay('homqua')">Hôm qua</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:napNgay('tuannay')">Tuần này</a>
<a class="dropdown-item" href="javascript:napNgay('tuantruoc')">Tuần trước</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:napNgay('thangnay')">Tháng này</a>
<a class="dropdown-item" href="javascript:napNgay('thangtruoc')">Tháng trước</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:napNgay('namnay')">Năm này</a>
<a class="dropdown-item" href="javascript:napNgay('namtruoc')">Năm trước</a>
</div>
</div>
<script type="text/javascript">
function napNgay(ts)
{
if(ts=='homnay')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now<fm>{0:dd/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now<fm>{0:dd/MM/yyyy}</fm></iif-D>');
}
else if(ts=='homqua')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:dd/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:dd/MM/yyyy}</fm></iif-D>');
}
else if(ts=='tuannay')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_Week_Start<fm>{0:dd/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_Week_Start;5<fm>{0:dd/MM/yyyy}</fm></iif-D>');
}
else if(ts=='tuantruoc')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_Week_Start;-7<fm>{0:dd/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_Week_Start;-2<fm>{0:dd/MM/yyyy}</fm></iif-D>');
}
else if(ts=='thangnay')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:1/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:#DaysInMonth/MM/yyyy}</fm></iif-D>');
}
else if(ts=='thangtruoc')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_AddMonth;-1<fm>{0:1/MM/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_AddMonth;-1<fm>{0:#DaysInMonth/MM/yyyy}</fm></iif-D>');
}
else if(ts=='namnay')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:1/1/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_AddDay;-1<fm>{0:31/12/yyyy}</fm></iif-D>');
}
else if(ts=='namtruoc')
{
$("[name$=TuNgay]").val('<iif-D>Date:Now_AddYear;-1<fm>{0:1/1/yyyy}</fm></iif-D>');
$("[name$=DenNgay]").val('<iif-D>Date:Now_AddYear;-1<fm>{0:31/12/yyyy}</fm></iif-D>');
}
$('#btLoad').trigger("click");
}
$(function() {
$("[name$=TuNgay],[name$=DenNgay]").datepicker({
dateFormat: "dd/mm/yy",
inline: true,
showAnim: 'fadeIn',
yearRange: '2010:2025',
changeMonth: true,
changeYear: true,
dayNamesMin:['CN','T2','T3','T4','T5','T6','T7'],
monthNamesShort: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
});
});
$('#btLoad').on("click", function(){
//alert('x');
var url = new URL(window.location.href);
url.searchParams.set('tungay', $("[name$=TuNgay]").val() );
url.searchParams.set('denngay', $("[name$=DenNgay]").val() );
window.location.href =url;
// alert(url);
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Số</th>
<th>Ngày</th>
<th>Tổng tiền hàng</th>
<th>Người tạo</th>
<th>Mã KH</th>
<th>Tên</th>
<th>Điện thoại</th>
<th>Ghi chú</th>
</tr>
</thead>
<tbody>
<iif-F>
<Source><type:query/>BanHang_iif/DonHang_List_DS_FRM</>0</Source>
<ItemF>
<tr>
<td><%i=So=i%>
<div class="btn-group float-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" >
<a class="dropdown-item text-danger " href="#"><i class="far fa-copy"></i> Xem phiếu</a>
<a class="dropdown-item text-danger " href="#"><i class="far fa-copy"></i> Hủy</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger " href="#"><i class="far fa-copy"></i> Thông tin khách hàng</a>
</div>
</div>
</td>
<td><%i=NgayTao<fm>dd/MM/yyyy HH:mm</fm>=i%></td>
<td style="text-align:right;width:150px;"><%i=TongTienHang<fm>{0:n0}</fm>=i%></td>
<td><%i=UserName=i%></td>
<td><%i=MaKhachHang=i%></td>
<td><%i=TenKhachHang=i%></td>
<td><%i=DienThoai=i%></td>
<td><%i=GhiChu=i%></td>
</tr>
</ItemF>
</iif-F>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th style="text-align:right"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function () {
$('#example').DataTable(
{
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$.]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
$( api.column( 0 ).footer() ).html(
''
);
// Total over all pages
total = api
.column(2)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
pageTotal = api
.column(2, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(2).footer()).html('' + pageTotal.dinhdangso() );
},
"paging": false,
"ordering": true,
"info": false,
}
);
});
</script>
2. QUERY
<Query>
<ID>Q1</ID>
<Src>12</Src>
<Type>Sql</Type>
<Cmd>
SELECT tbBanHang_SV.* , tbTinhTrang.TinhTrangTen
FROM tbBanHang_SV INNER JOIN
tbTinhTrang ON tbBanHang_SV.TinhTrang = tbTinhTrang.TinhTrang
Where tbBanHang_SV.TinhTrang Like @TinhTrang And dbo.ConvertDate(NgayTao) Between dbo.ConvertDate(@TuNgay) And dbo.ConvertDate(@DenNgay) Order by So ASC</Cmd>
<SqlParameter>
TinhTrang<pr&/><iif-D>Url:tinhtrang<empty:%/><null:%/></iif-D>
TuNgay<pr&/><iif-D>Url:tungay<empty:2000-1-1/><null:2000-1-1/></iif-D><pr&/>datetime
DenNgay<pr&/><iif-D>Url:denngay<empty:2100-1-1/><null:2100-1-1/></iif-D><pr&/>datetime
</SqlParameter>
</Query>
Mục liên quan:
