¿Cómo puedo implementar el plugin jQuery DataTables utilizando C#, ASP.NET, SQL Server, procesamiento lateral con ajax y servicios web?¿Cómo puedo implementar el plugin jQuery DataTables usando el procesamiento lateral C#, ASP.NET, SQL Server?
Me gustaría implementar una cuadrícula de Datatables usando C# y ASP.NET, pero es difícil encontrar un ejemplo que funcione.
Un ejemplo de trabajo de JQuery DataTables en C#, ASP.NET, SQL Server, procesamiento lateral con ajax y servicios web.
http://jquerydatatablessamp.codeplex.com/
https://github.com/benni12/jquerydatatablesExample
(publicado dos veces para que sea más fácil para alguien que busca para encontrarlo)
empezar por ligarse a DataTables.Net, Allan ha hecho un trabajo increíble con este enchufar.
He estado usando este complemento durante aproximadamente un año. Cuando intenté implementarlo por primera vez en C# y .NET con procesamiento en el lado del servidor, ajax y servicios web, había poca documentación y ningún ejemplo de trabajo, así que decidí juntar uno.
El código fuente proporcionado es de un proyecto de sitio web de Visual Studio 2012 (probado en Ultimate 2012 y Pro 2012). Tiré esto como un simple ejemplo de trabajo con la esperanza de ayudar a alguien más a tratar de poner juntos algo así. Es algo que desearía tener hace un año.
La base de datos mdf se incluye en la carpeta App_Data. Actualmente estoy ejecutando una instancia de MS SQL Server Express 2012.
Instalación necesaria SQL Server Express 2012 u otras instalaciones estándar o mejores de MS SQL Server. Probado en Standard 2008 R2 y 2012 Express.
cuya versión t o usuario en vs? – Sender
no puedo abrir esto proporcione otra versión, usaré VS2010 Ultimate – Sender
@ user108 está bien, la compilación 2010 ya está disponible en los enlaces GitHub y Codeplex. Construido en Pro. Espero que esto funcione para usted. Déjame saber como va. – NickBenedict
Esta versión es para SqlServer anterior, para una versión más nueva, pruebe con la otra.
Esta técnica utiliza el procedimiento almacenado con una mejor estructura para recuperar datos de forma eficiente Las características principales son
funcional y Muy útil
Paso 1: (HTML)
<link href="../Content/css/datatables.min.css" rel="stylesheet" />
<script src="../Scripts/datatables.min.js"></script>
<script src="../Scripts/jQuery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
if ($.fn.dataTable.isDataTable('#tbl_category')) {
t.destroy();
}
t = $("#tbl_category").DataTable({
processing: true,
serverSide: true,
info: true,
ajax: {
url: '../Ajax/Category?option=GetAllAdminCategory&user_srno='+user_srno,
data: function (data) {
delete data.columns;
}
},
columns: [
{ "data": "abc" },
{ "data": "name" },
{ "data": "baseDiscount" },
{ "data": "additionalDiscount" },
{ "data": "specialDiscount" },
{
"render": function (data, type, full, meta) {
return '<a class="btn btn-warning" onClick="editdata(' + full.srno + ',\'' + full.name + '\',\'' + full.baseDiscount + '\',\'' + full.additionalDiscount + '\',\'' + full.specialDiscount + '\',\'' + full.specialDiscount + '\')" href="javascript://">Edit</a> <a class="btn btn-danger" onClick="deletePhantom(' + full.srno + ',\'DELETE\')" href="javascript://">Remove</a>';
}
}
],
order: [[0, 'desc']],
select: true,
dom: 'lfrtip',
responsive: true,
buttons: true
});
t.on('order.dt search.dt', function() {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
<table id="tbl_category" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</tfoot>
</table>
PASO: 2 (procedimiento almacenado)
Create procedure [dbo].[category_post]
@srno int=null,
@user_srno int=null,
@catSrno int=null,
@name varchar(200)=null,
@baseDiscount numeric(18,2)=null,
@additionalDiscount numeric(18,2)=null,
@specialDiscount numeric(18,2)=null,
@status int null,
@Action_by int null,
@option varchar(20) = null,
@orderColumn int =null,
@orderDir varchar(20)=null,
@start int =null,
@limit int =null,
@searchKey varchar(20)
as
BEGIN
if @option='GetAllAdminCategory'
begin
select IDENTITY(int,1,1) as SnoID, null as abc,specialDiscount, additionalDiscount, baseDiscount, name,cast(srno as varchar(20)) as srno
--this method is userful for all sql server version (it can be made better by using fetch)
into #tempCategory
from categoryStd where [status] not in(4,14) and categoryStd.name like '%'[email protected]+'%'
declare @to as int = @[email protected]
select * from #tempCategory where SnoID>@start and SnoID<[email protected]
order by
CASE WHEN @orderColumn = 1 AND @orderdir = 'desc' THEN #tempCategory.[name] END DESC,
CASE WHEN @orderColumn = 1 AND @orderdir = 'asc' THEN #tempCategory.[name] END ASC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'desc' THEN #tempCategory.[name] END DESC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'asc' THEN #tempCategory.[name] END ASC
select count(*) from #tempCategory
end
END
PASO: 3 (AJAX página) C# forma
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using AppBlock;
using System.Data.SqlClient;
using Newtonsoft.Json;
namespace alfest.Ajax
{
public partial class Category : System.Web.UI.Page
{
string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString;
CommonClass cmnCls = new CommonClass();
protected void Page_Load(object sender, EventArgs e)
{
mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString();
option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString();
limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString();
searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString();
pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString();
draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();
if (option == "GetAllAdminCategory")
{
// Cls_Category CatgObj = new Cls_Category();
// CatgObj.orderColumn = Convert.ToInt32(orderByColumn);
// CatgObj.limit = Convert.ToInt32(limit);
// CatgObj.orderDir = orderByDir;
// CatgObj.start = Convert.ToInt32(start);
// CatgObj.searchKey = searchKey;
// CatgObj.option = "GetAllAdminCategory";
// or user your own method to get data (just fill the dataset)
// DataSet ds = cmnCls.PRC_category(CatgObj);
dynamic newtonresult = new
{
status = "success",
draw = Convert.ToInt32(draw == "" ? "0" : draw),
recordsTotal = ds.Tables[1].Rows[0][0],
recordsFiltered = ds.Tables[1].Rows[0][0],
data = ds.Tables[0]
};
jsonString = JsonConvert.SerializeObject(newtonresult);
Response.Clear();
Response.ContentType = "application/json";
Response.Write(jsonString);
}
}
}
}
RESULTADO FINAL: 
Humildemente solicito más comentarios explicando el código, si es posible ... y con mucho gusto le recomiendo si se proporciona –
como lo que significa dom: 'lfrtip'? –
@ Malky.Kid que es el cuadro de búsqueda, el estado, los botones de búsqueda, es la representación y el orden de la misma. –
Implementación en MVC, Entity Framework, procedimiento almacenado con la última recuperación de paginación fset
Paso 1 - HTML
<table id="tbl_category" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>Base Discount</th>
<th>Additional Discount</th>
<th>Special Discount</th>
<th>Action</th>
</tr>
</tfoot>
</table>
@*<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.13/r-2.1.1/sc-1.4.2/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.13/r-2.1.1/sc-1.4.2/datatables.min.js"></script>*@
<link href="~/Scripts/JqueryDatatable/Datatable.css" rel="stylesheet" />
<script src="~/Scripts/JqueryDatatable/DataTable.js"></script>
<script>
$(document).ready(function() {
if ($.fn.dataTable.isDataTable('#tbl_category')) {
t.destroy();
}
t = $("#tbl_category").DataTable({
processing: true,
serverSide: true,
info: true,
ajax: {
url: '../Client/SearchMis',
data: function (data) {
delete data.columns;
}
},
scrollY: 300,
deferRender: true,
scroller: true,
columns: [
{ "data": "abc" },
{ "data": "name" },
{ "data": "Address" },
{ "data": "name" },
{ "data": "name" },
{
"render": function (data, type, full, meta) {
return '<a class="btn btn-warning" onClick="editdata(' + full.name + ',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\',\'' + full.name + '\')" href="javascript://">Edit</a> <a class="btn btn-danger" onClick="deletePhantom(' + full.name + ',\'DELETE\')" href="javascript://">Remove</a>';
}
}
],
order: [[0, 'desc']],
select: true,
dom: 'lfrtip',
responsive: true,
buttons: true
});
t.on('order.dt search.dt', function() {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
Paso 2 - C#
using EmployeeTrackingSystemAndMIS.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web.Mvc;
namespace EmployeeTrackingSystemAndMIS.Controllers
{
public class ClientController : Controller
{
private EmployeeTrackingSystemAndMISEntities db = new EmployeeTrackingSystemAndMISEntities();
public string SearchMis()
{
string limit, start, searchKey, orderColumn, orderDir, draw, jsonString;
limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
orderColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
orderDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();
var parameter = new List<object>();
var param = new SqlParameter("@orderColumn", orderColumn);
parameter.Add(param);
param = new SqlParameter("@limit", limit);
parameter.Add(param);
param = new SqlParameter("@orderDir", orderDir);
parameter.Add(param);
param = new SqlParameter("@start", start);
parameter.Add(param);
param = new SqlParameter("@searchKey", searchKey);
parameter.Add(param);
var CompanySearchList = db.Database.SqlQuery<CompanySearch>("EXEC SearchCompany @orderColumn,@limit,@orderDir,@start,@searchKey ", parameter.ToArray()).ToList();
dynamic newtonresult = new
{
status = "success",
draw = Convert.ToInt32(draw == "" ? "0" : draw),
recordsTotal = CompanySearchList.FirstOrDefault().TotalCount,
recordsFiltered = CompanySearchList.FirstOrDefault().TotalCount,
data = CompanySearchList
};
jsonString = JsonConvert.SerializeObject(newtonresult);
return jsonString;
}
private class CompanySearch
{
public int TotalCount { get; set; }
public string abc { get; set; }
public string Address { get; set; }
public int? ClientID { get; set; }
public int? EmployeeID { get; set; }
public string name { get; set; }
public int CompanyID { get; set; }
}
}
}
Paso 3 - Procedimiento almacenado
USE [EmployeeTrackingSystemAndMIS]
GO
/****** Object: StoredProcedure [dbo].[category_post] Script Date: 22-02-2017 10:57:48 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
alter procedure [dbo].SearchCompany
@orderColumn int ,
@limit int,
@orderDir varchar(20),
@start int,
@searchKey varchar(20)
as
BEGIN
declare @to as int = @[email protected]
select TotalCount = COUNT(c.CompanyID) OVER(), null as abc,c.Address,c.ClientID ,c.EmployeeID , name,
c.CompanyID
from CompanyTbl c where c.Name like '%'[email protected]+'%'
order by
CASE WHEN @orderColumn = 1 AND @orderdir = 'desc' THEN c.[name] END DESC,
CASE WHEN @orderColumn = 1 AND @orderdir = 'asc' THEN c.[name] END ASC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'desc' THEN c.[name] END DESC,
CASE WHEN @orderColumn = 2 AND @orderdir = 'asc' THEN c.[name] END ASC
OFFSET @start ROWS
FETCH NEXT @to ROWS ONLY
End
Mis valores de Request.QueryString siempre están vacíos ... alguna idea? – Murphybro2
@ Murphybro2 ¿Qué versión de .net estás usando, es mvc, asp.net, .net core. –
He aquí un artículo de Editar Jquery DataTable en Asp.net La operación C# CRUD se refiere a http://codepedia.info/2013/07/edit-jquery-datatable-asp-net-crud/ –