पेजिंग, फ़िल्टरिंग और

Question

के साथ सर्वर साइड प्रोसेसिंग के लिए jquery डेटाटेबल का उपयोग करके मुझे अपने एएसपीएनटी एमवीसी (सी #) एप्लिकेशन के लिए jquery डेटाटेबल सर्वर-साइड प्रसंस्करण (http://datatables.net) का उपयोग करने की आवश्यकता है।

मेरे आवेदन में सूची में तालिका में दिखाने के लिए हजारों रिकॉर्ड हैं। मैं पेजिंग, फ़िल्टरिंग और खोज को सक्षम करने के लिए jquery डेटाटेबल का उपयोग कर रहा हूं।

क्या एएसपीनेट एमवीसी (सी #) के साथ उपयोग करने के लिए jquery डेटाटेबल सर्वर-साइड प्रसंस्करण के लिए कोई अच्छा संदर्भ/आलेख है?

Answer 1

2 लिंक:

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

एक उदाहरण परियोजना, आप इसे डाउनलोड करने और डिबगिंग द्वारा कर सकते हैं कि DataTables का एहसास दिलाने में है यह नेट MVC के साथ काम करता । इससे मुझे विषय में पैर ढूंढने में मदद मिली।

Answer 3

मेरा सुझाव है ALMMa DataTables

Answer 4

हाय यह लिंक आपके लिए मददगार हो सकता है ...

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

यहाँ jQuery DataTable सर्वर साइड पृष्ठांकन के बारे में लेख और ASP.NET MVC में छँटाई, समझाया सर्वर dside के रूप में एएसपीनेट एमवीसी (सी #) में कदम से कदम मैं इस आलेख को संदर्भित करूंगा [jQuery डेटाटेबल सर्वर साइड पेजिनेशन और एएसपी.नेट एमवीसी

jQu में सॉर्टिंग सेटअप के लिए ery कोड 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 सी # कोड (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

इस संहिता इसका बहुत सरल

<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>"; 
    } 
} 
     ] 
    }); 
}); 

और का पालन करें इस नियंत्रक है विधि

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; 
    }