I would like to have this working too, so I went down the rabbit hole.
checkout:
https://datatables.net/examples/basic_init/state_save.htmlHowever, you can't just do something like this because you can't re-initialize the datatable after it's rendered:
$(document).ready(function() {
$('#orders-grid').DataTable( {
stateSave: true
} );
} );
which will lead you to try something like this:
https://datatables.net/manual/tech-notes/3Which I couldn't get working either, so to do it right we probably have to extend Nop.Web.Framework\Models\Datatables\DataTablesModel.cs
I created Nop.Web.Framework\Models\Datatables\Extensions\DataTablesModelExtension.cs:
namespace Nop.Web.Framework.Models.DataTables
{
/// <summary>
/// Represents base DataTables extension model
/// </summary>
public partial class DataTablesModel
{
/// <summary>
/// Feature control DataTables' stateSave mode
/// </summary>
public bool StateSave { get; set; } = false;
}
}
And add to: Nop.Web\Areas\Admin\Views\Shared\_Table.Definition.cshtml
@if (Model.StateSave)
{
<text>
stateSave: @Model.StateSave.ToString().ToLower(),
</text>
}
Then you can add "StateSave = true" to the Datatable initialization in something like Presentation\Nop.Web\Areas\Admin\Views\Order\List.cshtml:
var gridModel = new DataTablesModel
{
Name = "orders-grid",
UrlRead = new DataUrl("OrderList", "Order", null),
SearchButtonId = "search-orders",
StateSave = true,
Length = Model.PageSize,
LengthMenu = Model.AvailablePageSizes,
blah blah blah...
And you will see it begin to allocate the state in local storage. However, to truly get it saving state the stateSaveParams and stateLoadParams need to be handled, which I don't have working yet.
Refs:
https://datatables.net/reference/event/stateSaveParamshttps://datatables.net/reference/option/stateLoadParamsTried this, but it doesn't work because I'm assuming the table needs to be initialized with the callbacks, rather than after the page is rendered.
$(document).ready(function() {
$('#orders-grid')
.dataTable()
.on('stateSaveParams.dt', function (e, settings, data) {
data.StartDate = $('#@Html.IdFor(model => model.StartDate)').val();
data.EndDate = $('#@Html.IdFor(model => model.EndDate)').val();
data.OrderStatusIds = $('#@Html.IdFor(model => model.OrderStatusIds)').val();
data.PaymentStatusIds = $('#@Html.IdFor(model => model.PaymentStatusIds)').val();
data.ShippingStatusIds = $('#@Html.IdFor(model => model.ShippingStatusIds)').val();
data.StoreId = $('#@Html.IdFor(model => model.StoreId)').val();
data.VendorId = $('#@Html.IdFor(model => model.VendorId)').val();
data.WarehouseId = $('#@Html.IdFor(model => model.WarehouseId)').val();
data.BillingEmail = $('#@Html.IdFor(model => model.BillingEmail)').val();
data.BillingPhone = $('#@Html.IdFor(model => model.BillingPhone)').val();
data.BillingLastName = $('#@Html.IdFor(model => model.BillingLastName)').val();
data.BillingCountryId = $('#@Html.IdFor(model => model.BillingCountryId)').val();
data.PaymentMethodSystemName = $('#@Html.IdFor(model => model.PaymentMethodSystemName)').val();
data.ProductId = $('#@Html.IdFor(model => model.ProductId)').val();
data.OrderNotes = $('#@Html.IdFor(model => model.OrderNotes)').val();
});
$('#orders-grid')
.dataTable()
.on('stateLoadParams.dt', function (e, settings, data) {
$('#@Html.IdFor(model => model.StartDate)').val(data.StartDate);
$('#@Html.IdFor(model => model.EndDate)').val(data.EndDate);
$('#@Html.IdFor(model => model.OrderStatusIds)').val(data.OrderStatusIds);
$('#@Html.IdFor(model => model.PaymentStatusIds)').val(data.PaymentStatusIds);
$('#@Html.IdFor(model => model.ShippingStatusIds)').val(data.ShippingStatusIds);
$('#@Html.IdFor(model => model.StoreId)').val(data.StoreId);
$('#@Html.IdFor(model => model.VendorId)').val(data.VendorId);
$('#@Html.IdFor(model => model.WarehouseId)').val(data.WarehouseId);
$('#@Html.IdFor(model => model.BillingEmail)').val(data.BillingEmail);
$('#@Html.IdFor(model => model.BillingPhone)').val(data.BillingPhone);
$('#@Html.IdFor(model => model.BillingLastName)').val(data.BillingLastName);
$('#@Html.IdFor(model => model.BillingCountryId)').val(data.BillingCountryId);
$('#@Html.IdFor(model => model.PaymentMethodSystemName)').val(data.PaymentMethodSystemName);
$('#@Html.IdFor(model => model.ProductId)').val(data.ProductId);
$('#@Html.IdFor(model => model.OrderNotes)').val(data.OrderNotes);
});
});
Looking into further extending DataTablesModels.cs with the callback functions, similar to how it does the
FooterCallback but it will take more work. If I make a breakthrough I will update. Maybe someone way more familiar with Datatables than I can point us in the right direction.
namespace Nop.Web.Framework.Models.DataTables
{
/// <summary>
/// Represents base DataTables model
/// </summary>
public partial class DataTablesModel
{
/// <summary>
/// Feature control DataTables' stateSave mode
/// </summary>
public bool StateSave { get; set; } = false;
/// <summary>
/// Gets or sets state save params function name(js)
/// See also https://datatables.net/reference/option/stateSaveParams
/// </summary>
public string StateSaveParams { get; set; }
/// <summary>
/// Gets or sets state load params function name(js)
/// See also https://datatables.net/reference/option/stateLoadParams
/// </summary>
public string StateLoadParams { get; set; }
}
}