https://www.codeproject.com/Articles/1257480/jQuery-DataTable-Integration-with-Server-Side-Proc
Vista -------------------------------------------------------------------------------------------------------------------
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<script>
var pageInitialized = false;
$(function () {
if (pageInitialized) return;
pageInitialized = true;
if ($.fn.DataTable.isDataTable('#tblOrder')) {
$('#tblOrder').dataTable().fnDestroy();
$('#tblOrder').dataTable().empty();
}
var complete = $('#tblOrder').DataTable(
{
"serverSide": true,
"destroy": true,
"processing": true,
"ajax":
{
url: "@Url.Action("OrderList", "Boleta")",
method: "POST"
},
"columns": [
{ "data": "IdBoleta" },
{ "data": "Entidad" },
{ "data": "FechaCreacion" },
{ "data": "TotalPlastico" },
{ "data": "TotalCarton" },
{ "data": "TotalMadera" }
]
}
);
var itm = $("#tblOrder_filter input")
itm.unbind();
itm.keyup(function (e) {
//enter or
tab
if (e.keyCode == 13) {
complete.search(this.value).draw();
}
});
});
</script>
<table class="table" id="tblOrder">
<thead>
<tr>
<th>
IdBoleta
</th>
<th>
Entidad
</th>
<th>
Fecha Creación
</th>
<th>
Total/Plástico
</th>
<th>
Total/Cartón
</th>
<th>
Total/Madera
</th>
</tr>
</thead>
<tbody></tbody>
</table>
[HttpPost]
public JsonResult
ItemsList(DTParameters param)
{
int pageNumber = param.Start == 0 ?
1 : ((param.Start / param.Length) + 1);
DataTable dtDisplay = Extensions.Execute_QueryToDataTable($"EXEC GetItems {param.Length},{(pageNumber)}");
List<BoletaViewModel> list_boleta = new List<BoletaViewModel>();
int TotalVirtual = 0;
foreach (DataRow item in dtDisplay.Rows)
{
list_boleta.Add(new BoletaViewModel()
{
IdBoleta = item["IdBoleta"].ToString().ToInt(),
Entidad = item["Entidad"].ToString().Trim(),
FechaCreacion = item["FechaCreacion"].ToString(),
TotalPlastico = item["TPlastico"].ToString().ToDecimal(),
TotalCarton = item["TCarton"].ToString().ToDecimal(),
TotalMadera = item["TMadera"].ToString().ToDecimal(),
});
TotalVirtual = item["TotalVirtual"].ToString().ToInt();
}
DTResult<BoletaViewModel> finalresult = new DTResult<BoletaViewModel>
{
draw = param.Draw,
data = list_boleta.ToList(),
recordsFiltered = TotalVirtual
,
recordsTotal =
list_boleta.Count
};
return Json(finalresult);
}
Model----------------------------------------------------------------------------------------------------------------
public class BoletaViewModel
{
public int IdBoleta { get; set; }
public string Entidad { get; set; }
public string FechaCreacion { get; set; }
public decimal TotalPlastico { get; set; }
public decimal TotalCarton { get; set; }
public decimal TotalMadera { get; set; }
}
namespace DataTableCode.Models
{
public class DTResult<T>
{
/// <summary>
/// The draw counter that this object is a
response to - from the draw parameter sent as part of the data request.
/// Note that it is strongly recommended for
security reasons that you cast this parameter to an integer, rather than simply
echoing back to the client what it sent in the draw parameter, in order to
prevent Cross Site Scripting (XSS) attacks.
/// </summary>
public int draw { get; set; }
/// <summary>
/// Total records, before filtering (i.e. the
total number of records in the database)
/// </summary>
public int recordsTotal { get; set; }
/// <summary>
/// Total records, after filtering (i.e. the
total number of records after filtering has been applied - not just the number
of records being returned for this page of data).
/// </summary>
public int recordsFiltered { get; set; }
/// <summary>
/// The data to be displayed in the table.
/// This is an array of data source objects,
one for each row, which will be used by DataTables.
/// Note that this parameter's name can be
changed using the ajaxDT option's dataSrc property.
/// </summary>
public List<T> data { get; set; }
}
/// <summary>
/// The additional columns that you can send
to jQuery DataTables for automatic processing.
/// </summary>
public abstract class DTRow
{
/// <summary>
/// Set the ID property of the dt-tag tr node
to this value
/// </summary>
public virtual string DT_RowId
{
get { return null; }
}
/// <summary>
/// Add this class to the dt-tag tr node
/// </summary>
public virtual string DT_RowClass
{
get { return null; }
}
/// <summary>
/// Add this data property to the row's
dt-tag tr node allowing abstract data to be added to the node, using the HTML5
data-* attributes.
/// This uses the jQuery data() method to set
the data, which can also then be used for later retrieval (for example on a
click event).
/// </summary>
public virtual object DT_RowData
{
get { return null; }
}
}
/// <summary>
/// The parameters sent by jQuery DataTables
in AJAX queries.
/// </summary>
public class DTParameters
{
/// <summary>
/// Draw counter.
/// This is used by DataTables to
ensure that the Ajax returns from server-side processing requests are drawn in
sequence by DataTables (Ajax requests are asynchronous and thus can return out
of sequence).
/// This is used as part of the draw
return parameter (see below).
/// </summary>
public int Draw { get; set; }
/// <summary>
/// An array defining all columns in
the table.
/// </summary>
public DTColumn[] Columns { get; set; }
/// <summary>
/// An array defining how many columns
are being ordering upon - i.e. if the array length is 1, then a single column
sort is being performed, otherwise a multi-column sort is being performed.
/// </summary>
public DTOrder[] Order { get; set; }
/// <summary>
/// Paging first record indicator.
/// This is the start point in the
current data set (0 index based - i.e. 0 is the first record).
/// </summary>
public int Start { get; set; }
/// <summary>
/// Number of records that the table
can display in the current draw.
/// It is expected that the number of
records returned will be equal to this number, unless the server has fewer
records to return.
/// Note that this can be -1 to
indicate that all records should be returned (although that negates any
benefits of server-side processing!)
/// </summary>
public int Length {
get; set; }
/// <summary>
/// Global search value. To be applied
to all columns which have searchable as true.
/// </summary>
public DTSearch Search { get; set; }
/// <summary>
/// Custom column that is used to
further sort on the first Order column.
/// </summary>
public string
SortOrder
{
get
{
return Columns != null &&
Order != null && Order.Length > 0
?
(Columns[Order[0].Column].Data + (Order[0].Dir == DTOrderDir.DESC ? " " + Order[0].Dir : string.Empty))
: null;
}
}
}
/// <summary>
/// A jQuery DataTables column.
/// </summary>
public class DTColumn
{
/// <summary>
/// Column's data source, as defined by
columns.data.
/// </summary>
public string Data { get; set; }
/// <summary>
/// Column's name, as defined by
columns.name.
/// </summary>
public string Name { get; set; }
/// <summary>
/// Flag to indicate if this column is
searchable (true) or not (false). This is controlled by columns.searchable.
/// </summary>
public bool
Searchable { get; set; }
/// <summary>
/// Flag to indicate if this column is
orderable (true) or not (false). This is controlled by columns.orderable.
/// </summary>
public bool
Orderable { get; set; }
/// <summary>
/// Specific search value.
/// </summary>
public DTSearch Search { get; set; }
}
/// <summary>
/// An order, as sent by jQuery
DataTables when doing AJAX queries.
/// </summary>
public class DTOrder
{
/// <summary>
/// Column to which ordering should be
applied.
/// This is an index reference to the
columns array of information that is also submitted to the server.
/// </summary>
public int Column { get; set; }
/// <summary>
/// Ordering direction for this column.
/// It will be dt-string asc or
dt-string desc to indicate ascending ordering or descending ordering,
respectively.
/// </summary>
public DTOrderDir Dir { get; set; }
}
/// <summary>
/// Sort orders of jQuery DataTables.
/// </summary>
public enum DTOrderDir
{
ASC,
DESC
}
/// <summary>
/// A search, as sent by jQuery
DataTables when doing AJAX queries.
/// </summary>
public class DTSearch
{
/// <summary>
/// Global search value. To be applied
to all columns which have searchable as true.
/// </summary>
public string Value { get; set; }
/// <summary>
/// true if the global filter should be
treated as a regular expression for advanced searching, false otherwise.
/// Note that normally server-side
processing scripts will not perform regular expression searching for
performance reasons on large data sets, but it is technically possible and at
the discretion of your script.
/// </summary>
public bool Regex { get; set; }
}
}
No hay comentarios:
Publicar un comentario