utilizzando jquery datatable per l'elaborazione lato server con paging, filtraggio e ricerca

Question

Ho bisogno di utilizzare l'elaborazione lato server databile jquery (http://datatables.net) per l'applicazione asp.net mvc (C#).

La mia applicazione ha migliaia di record da mostrare nella tabella come lista. Sto usando jquery datatable per abilitare il paging, il filtraggio e la ricerca.

C'è un buon riferimento/articoli per jQuery DataTable elaborazione lato server da utilizzare con asp.net mvc (C#)?

Answer 1

2 link:

http://weblogs.asp.net/zowens/archive/2010/01/19/jquery-datatables-plugin-meets-c.aspx

http://blogs.msdn.com/b/paulwhit/archive/2009/03/28/walkthrough-full-example-of-using-mvccontrib-grid-with-jquery-datatable.aspx

Answer 2

https://github.com/johannes-brunner/DataTables-ASP.NET-MVC

Si tratta di un progetto di esempio, si può scaricare e debug di ottenere un'idea di come DataTable funziona con .NET MVC . Mi ha aiutato a trovare il piede giusto nell'argomento.

Answer 3

vorrei suggerire ALMMa DataTables

Answer 4

Hi questo link può essere utile a voi ...

http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html

Qui l'articolo su jQuery Datatable paginazione lato server e l'ordinamento in ASP.NET MVC, ha spiegato passo dopo passo in asp.net mvc (C#) come server dside Mi riferirò a questo articolo [jQuery Datatable lato server impaginazione e ordinamento in ASP.NET MVC

jQu Codice ery per la configurazione jQuery Datables

<script> 
    $(document).ready(function() { 
     $("#myTable").DataTable({ 
      "processing": true, // for show progress bar 
      "serverSide": true, // for process server side 
      "filter": false, // this is for disable filter (search box) 
      "orderMulti": false, // for disable multiple column at once 
      "ajax": { 
       "url": "/home/LoadData", 
       "type": "POST", 
       "datatype": "json" 
      }, 
      "columns": [ 
        { "data": "ContactName", "name": "ContactName", "autoWidth": true }, 
        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true }, 
        { "data": "Phone", "name": "Phone", "autoWidth": true }, 
        { "data": "Country", "name": "Country", "autoWidth": true }, 
        { "data": "City", "name": "City", "autoWidth": true }, 
        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true } 
      ] 
     }); 
    }); 
</script> 

ASP.NET C# Codice (MVC)

[HttpPost] 
    public ActionResult LoadData() 
    { 

     var draw = Request.Form.GetValues("draw").FirstOrDefault(); 
     var start = Request.Form.GetValues("start").FirstOrDefault(); 
     var length = Request.Form.GetValues("length").FirstOrDefault(); 
     //Find Order Column 
     var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault(); 
     var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault(); 


     int pageSize = length != null? Convert.ToInt32(length) : 0; 
     int skip = start != null ? Convert.ToInt32(start) : 0; 
     int recordsTotal = 0; 
     using (MyDatatableEntities dc = new MyDatatableEntities()) 
     { 

      var v = (from a in dc.Customers select a); 

      //SORT 
      if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir))) 
      { 
       v = v.OrderBy(sortColumn + " " + sortColumnDir); 
      } 

      recordsTotal = v.Count(); 
      var data = v.Skip(skip).Take(pageSize).ToList(); 
      return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet); 
     } 
    } 

Answer 5

segui questo il suo codice molto semplice

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#AllUsers").DataTable({ 
     "processing": true, // for show progress bar 
     "serverSide": true, // for process server side 
     "filter": true, // this is for disable filter (search box) 
     "orderMulti": false, // for disable multiple column at once 
     "ajax": { 
      "url": "@Url.Content("~/Users/GetAllUsers")", 
      "type": "POST", 
      "datatype": "json" 
     }, 
     "columns": [ 
      { data: 'UserID', name: 'UserID', "autoWidth": true }, 
      { data: 'Name', name: 'Name', "autoWidth": true }, 
      { data: 'Email', name: 'Email', "autoWidth": true }, 
      { data: 'UserRole', name: 'UserRole', "autoWidth": true }, 
      { data: 'Status', name: 'Status', "autoWidth": true }, 
{ 
    data: '', name: '', "autoWidth": true, "orderable": false, mRender: function (data, colo, row) { 
     return "<i class='fa fa-trash' style='cursor:pointer'></i>"; 
    } 
} 
     ] 
    }); 
}); 

e questo è controller metodo

public JsonResult GetAllUsers() 
    { 
     JsonResult result = new JsonResult(); 
     try 
     { 
      // Initialization. 
      string search = Request.Form.GetValues("search[value]")[0]; 
      string draw = Request.Form.GetValues("draw")[0]; 
      string order = Request.Form.GetValues("order[0][column]")[0]; 
      string orderDir = Request.Form.GetValues("order[0][dir]")[0]; 
      int startRec = Convert.ToInt32(Request.Form.GetValues("start")[0]); 
      int pageSize = Convert.ToInt32(Request.Form.GetValues("length")[0]); 
      // Loading. 
      List<User> data = _userReps.AllUsers().ToList(); 
      // Total record count. 
      int totalRecords = data.Count; 
      // Verification. 
      if (!string.IsNullOrEmpty(search) && 
       !string.IsNullOrWhiteSpace(search)) 
      { 
       // Apply search 
       data = data.Where(p => p.FirstName.ToString().ToLower().Contains(search.ToLower()) || 
        p.LastName.ToLower().Contains(search.ToLower()) || 
        p.EmailID.ToString().ToLower().Contains(search.ToLower()) || 
        p.UserRole.UserRoleName.ToLower().Contains(search.ToLower()) || 
        p.UserStatus.Name.ToLower().Contains(search.ToLower()) 
       ).ToList(); 
      } 
      // Sorting. 
      if (!(string.IsNullOrEmpty(order) && string.IsNullOrEmpty(orderDir))) 
      { 
       data = data.OrderBy(order + " " + orderDir).ToList(); 
      } 
      int recFilter = data.Count; 
      data = data.Skip(startRec).Take(pageSize).ToList(); 
      var modifiedData = data.Select(d => 
       new { 
       UserID= d.UserID, 
       Name= d.FirstName + " "+ d.LastName, 
       Email= d.EmailID, 
       Status= d.UserStatus.Name, 
       UserRole= d.UserRole.UserRoleName 
       } 
       ); 
      // Loading drop down lists. 
      result = this.Json(new 
      { 
       draw = Convert.ToInt32(draw), 
       recordsTotal = totalRecords, 
       recordsFiltered = recFilter, 
       data = modifiedData 
      }, JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) 
     { 
      // Info 
      Console.Write(ex); 
     } 
     // Return info. 
     return result; 
    }