web-dev-qa-db-ja.com

ページング、フィルタリング、検索を伴うサーバー側の処理にjquerydatatableを使用する

Asp.net mvc（C＃）アプリケーションには、jquery datatableサーバー側処理（ http://datatables.net ）を使用する必要があります。

私のアプリケーションには、リストとしてテーブルに表示する何千ものレコードがあります。 jquery datatableを使用して、ページング、フィルタリング、検索を有効にしています。

Asp.net mvc（C＃）で使用するjquery datatableサーバー側処理に関する適切なリファレンス/記事はありますか？

jqueryasp.net-mvcdatatables
14
Prasad

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

これはサンプルプロジェクトです。ダウンロードして、デバッグすることで、DataTablesが.NETMVCでどのように機能するかを理解できます。それは私がトピックの足場を見つけるのを助けました。

7
Rafael Emshoff

こんにちはこのリンクはあなたに役立つかもしれません...

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

ここでは、ASP.NETMVCでのjQueryDatatableサーバー側のページ付けと並べ替えに関する記事を、サーバーdsideとしてasp.net mvc（C＃）で段階的に説明します。この記事を参照します[ASP.NETMVCでのjQueryDatatableサーバー側のページ付けと並べ替え

セットアップ用のjQueryコードjQueryDatables

<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＃コード（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);
        }
    }
7
Sourav Mondal

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

2
Haim Evgi

このコードに従ってくださいその非常に単純です

<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;  
    }
1
Zahid Mustafa

私は提案します ALMMa DataTables

0
BeardedMan

あなたが参照した公式ウェブサイトには、完全なリファレンスがあります ここ 。

お役に立てば幸いです。

0
Varan Sinayee