JQuery Datatables服务器端处理示例

HTML

<table class="table table-striped table-bordered table-hover" id="table_report">
    <thead>
        <tr role="row">
            <th class="table-checkbox">
                选择
            </th>
            <th>图片</th>
            <th>商品名称</th>
            <th>商品编码</th>
            <th>商品类型</th>
            <th>价格</th>
            <th>会员价格</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr role="row">
            <th class="table-checkbox">
                <input type="checkbox" class="group-checkable" data-set="#table_report .checkboxes" />
            </th>
            <th>图片</th>
            <th>商品名称</th>
            <th>商品编码</th>
            <th>商品类型</th>
            <th>价格</th>
            <th>会员价格</th>
        </tr>
    </tfoot>
</table>

javascript

    <script type="text/javascript">
        $(function () {
            var table = $('#table_report');
            var oTable = table.dataTable({
                "processing": true,
                "serverSide": true,
                //"stateSave": true, // save datatable state(pagination, sort, etc) in cookie.
                "pagingType": "bootstrap_full_number",
                "language": {
                    "aria": {
                        "sortAscending": ": 以升序排列此列",
                        "sortDescending": ": 以降序排列此列"
                    },
                    "loadingRecords": "数据载入中...",
                    "emptyTable": "表中数据为空",
                    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "infoEmpty": "无数据",
                    "infoFiltered": "(由 _MAX_ 项过滤得到)",
                    "infoPostFix": "",
                    "infoThousands": ",",
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "search": "搜索:",
                    "zeroRecords": "没有匹配结果",
                    "paging": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "末页"
                    },
                    "paginate": {
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "尾页",
                        "first": "首页"
                    }
                },
                "ajax": {
                    url: "/DiscountInfo/DiscountGoodList/" + $("#GoodId").val(),
                    contentType: "application/json",
                    type: "POST",
                    data: function (d) {
                        var x = JSON.stringify(d);
                        //console.log(x);
                        return x;
                    },
                },
                "columns": [
                    {
                        "data": "Id", "render": function (data, type, full, meta) {
                            return '<input type="checkbox" class="checkboxes" value="' + data + '"/>';
                        }
                    },
                    { "data": "ImgPath", "name": "图片", "orderable": false ,"render": function (data, type, full, meta) {
                        return '<img src="' + data + '" height="48" width="48" onerror="errorProImg(this)"></img>';
                    }},
                    { "data": "ProName", "name": "商品名称", "orderable": true },
                    { "data": "ProNumber", "name": "商品编码", "orderable": true },
                    { "data": "CategoryTypeName", "name": "商品类型", "orderable": true },
                    { "data": "OrdinaryPrice", "name": "价格", "orderable": true },
                    { "data": "VipPrice", "name": "会员价格", "orderable": true }],
                "rowCallback": function (row, data) {
                    $(row).find("input").uniform();
                    if (data.Selected) {
                        $(row).addClass('active').find("input").attr("checked", true);
                    } else { }
                    $.uniform.update();
                },
                "lengthMenu": [
                    [20, 50, 100],
                    [20, 50, 100] // change per page values here
                ],
                // set the initial value
                "pageLength": 20,
                //"columnDefs": [{  // set default column settings
                //    'targets': [0],
                //    "searchable": false,
                //    'orderable': false
                //}],
                "order": [
                    [0, "desc"]// set first column as a default sort by asc
                ]
            });

            //单项操作
            table.on('change', 'tbody tr .checkboxes', function () {
                var checked = $(this).is(":checked");
                if (checked) {
                    $(this).parents('tr').addClass("active");
                    $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true }, function () { });
                } else {
                    $(this).parents('tr').removeClass("active");
                    $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false }, function () { });
                }
            });

            //多项操作
            table.find('.group-checkable').on("change", function () {
                var set = $(this).attr("data-set");
                var checked = $(this).is(":checked");
                var list = [];
                $(set).each(function () {
                    if (checked) {
                        $(this).attr("checked", true);
                        $(this).parents('tr').addClass("active");

                        list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true });
                    } else {
                        $(this).attr("checked", false);
                        $(this).parents('tr').removeClass("active");

                        list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false });
                    }
                });
                $.uniform.update(set);
                $.post("/DiscountInfo/UpdateDiscountGoodLists", { "list": list }, function () { });
            });
        });
    </script>

Service/asp.net mvc

[HttpPost]
public JsonResult DiscountGoodList(Guid id,datatables table)
{
    int total = 0;
    var goods = productsService.GetList();
    var dGoods = discountgoodsService.GetList().Where(c => c.Deleted == false && c.RuleId == id);

    var query = from g in goods
                join t in categoryTypeServic.GetList() on g.CategoryTypeId equals t.Id
                join dg in dGoods on g.Id equals dg.GoodsId into joinDG
                from dept in joinDG.DefaultIfEmpty()
                select new GoodListItemViewModel
                {
                    Id = g.Id,
                    ImgPath = g.ImgPath,
                    ProName = g.ProName,
                    ProNumber = g.ProNumber,
                    VipPrice = g.VipPrice,
                    OrdinaryPrice = g.OrdinaryPrice,
                    CategoryTypeId = g.CategoryTypeId,
                    Selected = dept == null ? false : true,
                    CategoryTypeName = t.TypeName
                };

    //数据总数（未过滤）
    total = query.Count();

    //搜索过滤
    if (string.IsNullOrWhiteSpace(table.search.value) == false)
    {
        query = query.Where(c=>c.ProName.Contains(table.search.value) || c.ProNumber.Contains(table.search.value) || c.CategoryTypeName.Contains(table.search.value));
    }

    #region 排序
    query = query.OrderBy(c => c.Id);
    foreach (var item in table.order)
    {
        if (item.dir == "asc")
        {
            switch (item.column)
            {
                case 0:
                    query = query.OrderBy(c => c.Selected);
                    break;
                case 2:
                    query = query.OrderBy(c => c.ProName);
                    break;
                case 3:
                    query = query.OrderBy(c => c.ProNumber);
                    break;
                case 4:
                    query = query.OrderBy(c => c.CategoryTypeName);
                    break;
                case 5:
                    query = query.OrderBy(c => c.OrdinaryPrice);
                    break;
                case 6:
                    query = query.OrderBy(c => c.VipPrice);
                    break;
                default:
                    query = query.OrderBy(c => c.Selected);
                    break;
            }
        }
        else {
            switch (item.column)
            {
                case 0:
                    query = query.OrderByDescending(c => c.Selected);
                    break;
                case 2:
                    query = query.OrderByDescending(c => c.ProName);
                    break;
                case 3:
                    query = query.OrderByDescending(c => c.ProNumber);
                    break;
                case 4:
                    query = query.OrderByDescending(c => c.CategoryTypeName);
                    break;
                case 5:
                    query = query.OrderByDescending(c => c.ProName);
                    break;
                case 6:
                    query = query.OrderByDescending(c => c.ProNumber);
                    break;
                default:
                    query = query.OrderByDescending(c => c.Selected);
                    break;
            }
        }
    } 
    #endregion

    DatatablesResult<GoodListItemViewModel> jsModel = new DatatablesResult<GoodListItemViewModel>(query, table.start, table.length, table.draw, total);

    return Json(jsModel);
}
		
		
		
public class datatables
{
    public datatables()
    {
        this.columns = new List<datatables_column>();
        this.order = new List<datatables_order>();
    }

    public int draw { get; set; }
    public List<datatables_column> columns { get; set; }
    /// <summary>
    /// 排序
    /// </summary>
    public List<datatables_order> order { get; set; }
    /// <summary>
    /// 数据开始位置，从0开始
    /// </summary>
    public int start { get; set; }
    /// <summary>
    /// 分页大小，-1代表不分页全部返回
    /// </summary>
    public int length { get; set; }
    /// <summary>
    /// 全局的搜索条件
    /// </summary>
    public datatables_search search { get; set; }
}

public class datatables_column
{
    public int data { get; set; }
    public string name { get; set; }
    public bool searchable { get; set; }
    public bool orderable { get; set; }
    public datatables_search search { get; set; }
}

public class datatables_search
{
    public string value { get; set; }
    public string regex { get; set; }
}

public class datatables_order
{
    public int column { get; set; }
    public string dir { get; set; }
}
	
	
public class DatatablesResult<T>
{
    public DatatablesResult(IQueryable<T> source, int start, int length, int draw, int recordsTotal)
    {
        this.draw = draw;
        this.recordsTotal = recordsTotal;
        this.recordsFiltered = source.Count();
        this.data = source.Skip(start).Take(length).ToList();
    }

    public DatatablesResult(IList<T> source, int start, int length, int draw, int recordsTotal)
    {
        this.draw = draw;
        this.recordsTotal = recordsTotal;
        this.recordsFiltered = source.Count();
        this.data = source.Skip(start).Take(length).ToList();
    }
    public DatatablesResult(IEnumerable<T> source, int start, int length, int draw, int recordsTotal)
    {
        this.draw = draw;
        this.recordsTotal = recordsTotal;
        this.recordsFiltered = source.Count();
        this.data = source.Skip(start).Take(length).ToList();
    }
    public DatatablesResult(IEnumerable<T> source, int recordsFiltered, int draw, int recordsTotal)
    {
        this.draw = draw;
        this.recordsTotal = recordsTotal;
        this.recordsFiltered = recordsFiltered;
        this.data = source.ToList();
    }

    public int draw { get; /*private*/  set; }
    public int recordsTotal { get; /*private*/  set; }
    public int recordsFiltered { get; /*private*/  set; }
    public IList<T> data { get; /*private*/ set; }
}

最终效果图

参考资料

datatables.js 简单使用--多选框和服务器端分页 http://www.cnblogs.com/lanshanke/p/5058865.html

 服务器处理(Server-side processing) http://datatables.club/manual/server-side.html

http://datatables.club

http://datatables.club/reference/option/

来自为知笔记(Wiz)