Я использую jQuery dataTable. Я хочу, чтобы исправить заголовок, когда пользователь прокручивает вниз в определенном div. Вот мой код и вот мое изображение.
Вот пример кода
$('#tblProducts').DataTable({
// "scrollY": 400,
// "scrollX": true,
fixedHeader: {
header: true
//,fixedHeader:$('#tblProducts').outerHeight()
},
"paging": false,
"fixedColumns": {
leftColumns: 1
},
"searching": false
// "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
Ссылка, которую я использую, находится здесь
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<table id="tblProducts" class="display nowrap table table-striped" style="width:100%;">
<thead class="table-thead">
<tr>
<th class="col-md-1 col-lg-1">
<input type="checkbox" id="checkAll" class="checkboxCSS" name="SelectAll" />
</th>
<th style="width:120.6945px !important;">
UPC
</th>
<th style="width:120px !important;">
Product Name
</th>
<th style="width:100px !important">
HAAD Code
</th>
<th>
Barcode
</th>
<th>
Status
</th>
<th>
Batch #
</th>
<th>
Expiry
</th>
<th>
Avb.Qty
</th>
<th>
Purchased
</th>
<th>
Initialize Qty
</th>
<th>
Sold
</th>
<th>
Adjusted
</th>
<th>
Return Out
</th>
<th>
Return In
</th>
<th>
Focr
</th>
<th>
Add/Discard
</th>
<th>
Real CP
</th>
<th>
Unit Cost
</th>
<th>
Unit Sale
</th>
<th>
Invoice#
</th>
<th>Type</th>
<th>Order Id</th>
<th>
Order Date
</th>
<th>
Receive Date
</th>
<th style="width:100px !important;">
VendorName
</th>
</tr>
</thead>
@for (int i = 0; i < Model.InventoryDetail.Count; i++)
{
@Html.HiddenFor(m => @Model.InventoryDetail[i].Id, new { name = "Id" })
var UPC = @Model.InventoryDetail[i].UPC;
var Id = @Model.InventoryDetail[i].Id;
var ProductName = @Model.InventoryDetail[i].ProductName;
var GreenrainCode = @Model.InventoryDetail[i].GreenrainCode;
var Barcode = @Model.InventoryDetail[i].Barcode;
var Description = @Model.InventoryDetail[i].Description;
var Status = @Model.InventoryDetail[i].Status;
var BatchNo = @Model.InventoryDetail[i].BatchNo;
string[] expirydate = @Model.InventoryDetail[i].ExpiryDate.ToString().Split(' ');
var ExpiryDate = expirydate[0];
var Quantity = @Model.InventoryDetail[i].Quantity;
var FocrQuantity = @Model.InventoryDetail[i].FocrQuantity;
var SoldQuantity = @Model.InventoryDetail[i].SoldQuantity;
var PurchasedQuantity = @Model.InventoryDetail[i].PurchasedQuantity;
var InitializeQuantity = @Model.InventoryDetail[i].InitializeQuantity;
var AdjustQuantity = @Model.InventoryDetail[i].AdjustQuantity;
var ReturnQty = @Model.InventoryDetail[i].ReturnQty;
var ReturnIn = @Model.InventoryDetail[i].ReturnIn;
var CostPrice = @Model.InventoryDetail[i].CostPrice;
var SalePrice = @Model.InventoryDetail[i].SalePrice;
var OrderId = @Model.InventoryDetail[i].OrderId;
var _addeddQuantity = @Model.InventoryDetail[i].AddedQuantity;
var _discardedQuantity = @Model.InventoryDetail[i].DiscardQuantity;
string[] _receiveDate = @Model.InventoryDetail[i].ReceivedDate.ToString().Split(' ');
var ReceiveDate = _receiveDate[0];
var StockType = _enumList.Where(x => (int)x == Model.InventoryDetail[i].TypeId).Select(x => x); // @Model.InventoryDetail[i].Type;
// var _purchaseQty = Model.InventoryDetail[i].getpurchaseQuantity();
<tbody>
<tr>
<td>
@Html.CheckBoxFor(m => @Model.InventoryDetail[i].IsRowChecked, new { name = "IsRowChecked", @class = "checkboxCSS" })
@if (Model.InventoryDetail[i].Quantity > 0)
{
<a href='/BarcodePrinting.aspx?StockId=@Model.InventoryDetail[i].Id' target="_blank" class="btn btn-default print-btn">Print Full PO Barcode</a>
}
</td>
<td>
@UPC
</td>
<td style="white-space:normal;">
@ProductName
</td>
<td>
@GreenrainCode
</td>
<td>
@Barcode
</td>
<td>
@Status
</td>
<td>
@BatchNo
</td>
<td>
@ExpiryDate
</td>
<td>
@Quantity
</td>
<td>
@PurchasedQuantity
</td>
<td>
@InitializeQuantity
</td>
<td>
@SoldQuantity
</td>
<td>
@AdjustQuantity
</td>
<td>
@ReturnQty
</td>
<td>
@ReturnIn
</td>
<td>
@FocrQuantity
</td>
<td>
@(_addeddQuantity + "/" + _discardedQuantity)
</td>
<td>
@Model.InventoryDetail[i].RealCostPrice
</td>
<td>
@Html.DisplayFor(x => x.InventoryDetail[i].CostPrice)
</td>
<td>
@Html.DisplayFor(x => x.InventoryDetail[i].SalePrice)
</td>
<td style="white-space:normal;">
@Model.InventoryDetail[i].InvoiceNumber
</td>
<td>@StockType.FirstOrDefault()</td>
<td>@OrderId</td>
<td>
@(Model.InventoryDetail[i].DatePurchase == null ? "" : Model.InventoryDetail[i].DatePurchase.Value.ToShortDateString())
</td>
<td>@ReceiveDate</td>
<td style="white-space:normal;">
@Model.InventoryDetail[i].VendorName
</td>
</tr>
</tbody>
}
</table>
Пожалуйста, просмотрите мою таблицу, поскольку я использую синтаксис mvc для рендеринга. Я загружаю эту таблицу в div. Я хочу исправить заголовок при прокрутке пользователя вниз. Как этого добиться я застрял.