ASP.Net MVC+Data Table实现分页+排序功能的方法

本文实例讲述了ASP.Net MVC+Data Table实现分页+排序功能的方法。分享给大家供大家参考,具体如下:

实现思路:

使用datatable内置的分页,排序
使用attribute+反射来控制需要排序和显示的字段以及顺序
分离排序和显示逻辑
若要添加搜索逻辑只需要传递搜索的字段到后端即可(js初始化时把"searching": false拿掉)。

View :

@using BCMS.BusinessLogic
@using BCMS.BusinessLogic.Models
@model List<BusCaptainObj>
<table id="tblData" class="table table-striped">
  <thead>
    <tr class="data-list">
      <th style="width:10%;">@Html.DisplayNameFor(model => model.First().PersNo)</th>
      <th style="width:30%;">@Html.DisplayNameFor(model => model.First().Personnel_Name)</th>
      <th style="width:20%;">@Html.DisplayNameFor(model => model.First().Position)</th>
      <th style="width:20%;">@Html.DisplayNameFor(model => model.First().Interchange)</th>
      <th style="width:20%;">Action</th>
    </tr>
  </thead>
</table>
@section scripts {
  <script type="text/javascript">
     @{
       var columns = DataTableHelper.DisplayColumns<BusCaptainObj>();
     }
    $(document).ready(function () {
      $('#tblData').dataTable({
        "processing": true,
        "serverSide": true,
        "searching": false,
        "stateSave": true,
        "oLanguage": { "sInfoFiltered": "" },
        "ajax": {
          "url": @Url.Action("GetJsonData"),
          "type": "GET"
        },
        "columns": [
          { "data": "@columns[0]" },
          { "data": "@columns[1]" },
          { "data": "@columns[2]" },
          { "data": "@columns[3]" },
          {
            "data": "@columns[0]",
            "orderable": false,
            "searchable": false,
            "render": function (data, type, full, meta) {
              if (type === 'display') {
                return GetDetailButton("/BusCaptain/Detail?bcId=", data) + GetInfoButton("/Telematics?bcId=", data, "Performance");
              } else { return data; }
            }
          }
        ],
        "order": [[0, "asc"]]
      });
    });
  </script>
}

Controller :

public ActionResult GetJsonData(int draw, int start, int length)
{
  string search = Request.QueryString[DataTableQueryString.Searching];
  string sortColumn = "";
  string sortDirection = "asc";
  if (Request.QueryString[DataTableQueryString.OrderingColumn] != null)
  {
    sortColumn = GetSortColumn(Request.QueryString[DataTableQueryString.OrderingColumn]);
  }
  if (Request.QueryString[DataTableQueryString.OrderingDir] != null)
  {
    sortDirection = Request.QueryString[DataTableQueryString.OrderingDir];
  }
  DataTableData dataTableData = new DataTableData();
  dataTableData.draw = draw;
  int recordsFiltered = 0;
  dataTableData.data = BusCaptainService.Instance.SearchMyBuscaptains(User.Identity.Name, out recordsFiltered, start, length, sortColumn, sortDirection, search).Data;
  dataTableData.recordsFiltered = recordsFiltered;
  return Json(dataTableData, JsonRequestBehavior.AllowGet);
}
public string GetSortColumn(string sortColumnNo)
{
  var name = DataTableHelper.SoringColumnName<BusCaptainObj>(sortColumnNo);
  return name;
}
public class DataTableData
{
  public int draw { get; set; }
  public int recordsFiltered { get; set; }
  public List<BusCaptainObj> data { get; set; }
}

Model :

class XXX{
...
  [DisplayColumn(0)]
    [SortingColumn(0)]
    public int? A { get; set; }
    [DisplayColumn(1)]
    [SortingColumn(1)]
    public string B { get; set; }
...
}

Helper class :

public class SortingColumnAttribute : Attribute
{
    public int Index { get; }
    public SortingColumnAttribute(int index)
    {
      Index = index;
    }
}
public class DisplayColumnAttribute : Attribute
{
    public int Index { get; }
    public DisplayColumnAttribute(int index)
    {
      Index = index;
    }
}
public static class DataTableQueryString
{
    public static string OrderingColumn = "order[0][column]";
    public static string OrderingDir = "order[0][dir]";
    public static string Searching = "search[value]";
}
public static class DataTableHelper
{
    public static IList<string> DisplayColumns<T>()
    {
      var result = new Dictionary<int, string>();
      var props = typeof(T).GetProperties();
      foreach (var propertyInfo in props)
      {
        var propAttr =
          propertyInfo
            .GetCustomAttributes(false)
            .OfType<DisplayColumnAttribute>()
            .FirstOrDefault();
        if (propAttr != null)
        {
          result.Add(propAttr.Index,propertyInfo.Name);
        }
      }
      return result.OrderBy(x => x.Key).Select(x => x.Value).ToList();
    }
    public static string SoringColumnName<T>(string columnIndex)
    {
      int index;
      if (!int.TryParse(columnIndex, out index))
      {
        throw new ArgumentOutOfRangeException();
      }
      return SoringColumnName<T>(index);
    }
    public static string SoringColumnName<T>(int index)
    {
      var props = typeof(T).GetProperties();
      foreach (var propertyInfo in props)
      {
        var propAttr =
          propertyInfo
            .GetCustomAttributes(false)
            .OfType<SortingColumnAttribute>()
            .FirstOrDefault();
        if (propAttr != null && propAttr.Index == index)
        {
          return propertyInfo.Name;
        }
      }
      return "";
    }
}

Query:

...
var query = context.BusCaptains
            .Where(x => ...)
            .OrderByEx(sortDirection, sortField)
            .Skip(start)
            .Take(pageSize);
...

LINQ Helper :

...
public static IQueryable<T> OrderByEx<T>(this IQueryable<T> q, string direction, string fieldName)
    {
      try
      {
        var customProperty = typeof(T).GetCustomAttributes(false).OfType<ColumnAttribute>().FirstOrDefault();
        if (customProperty != null)
        {
          fieldName = customProperty.Name;
        }
        var param = Expression.Parameter(typeof(T), "p");
        var prop = Expression.Property(param, fieldName);
        var exp = Expression.Lambda(prop, param);
        string method = direction.ToLower() == "asc" ? "OrderBy" : "OrderByDescending";
        Type[] types = new Type[] {q.ElementType, exp.Body.Type};
        var mce = Expression.Call(typeof(Queryable), method, types, q.Expression, exp);
        return q.Provider.CreateQuery<T>(mce);
      }
      catch (Exception ex)
      {
        _log.ErrorFormat("error form OrderByEx.");
        _log.Error(ex);
        throw ;
      }
    }
...

更多关于asp.net相关内容感兴趣的读者可查看本站专题:《asp.net优化技巧总结》、《asp.net字符串操作技巧汇总》、《asp.net操作XML技巧总结》、《asp.net文件操作技巧汇总》、《asp.net ajax技巧总结专题》及《asp.net缓存操作技巧总结》。

希望本文所述对大家asp.net程序设计有所帮助。

(0)

相关推荐

  • Asp.Net MVC 分页、检索、排序整体实现代码

    很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功能不是高大全,但求一个清楚明白,也欢迎园友拍砖.前端是bootstrap3+jPaginate,后台基于membership.没什么难点. 先上效果图. 分页其实就是处理好 每页项目数.总项目数.总页数.当前页.为了方便复用,就先从仓库开始说起. 一.建立仓库 1.定义Ipager接口,需要分页的模

  • ASP.NET MVC分页和排序功能实现

    分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理.好了,废话说多了.现在我们进入正题: 这里,我打算使用EF Code-First方式分页控件就是用PagedList.MVC,来做分页,对于排序,实现的思路是,加载数据出来之后,默认是升序排序,然后我们点击一下相应的列标题,就按照该字段降序排序,查数据.思路明确了,就开始干吧! 1.首先新建一个空白的MVC项目,在Model

  • ASP.NET MVC分页的实现方法

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList.Mvc包来实现分页功能. 1) 安装PagedList.Mvc 首先,我们需要安装分页组件包,在Visual Studio 2010中点击[项目]-[管理NuGet程序包],打开NuGet包管理器窗体,在该窗体中,选择"联机"标签,然后搜索pagedlist,如下图所示.点击"安

  • ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(PagedList.Mvc)

    ASP.NET MVC中进行分页的方式有多种,但在NuGet上使用最广泛的就是用PagedList.X.PagedList.Mvc进行分页.(原名为:PagedList.Mvc,但是2014年开始,作者将项目名称改名字为"X.PagedList.Mvc"),用这个插件的话会非常便利,大家可以试试,接下来将给大家讲下如何安装这个NuGet插件. ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(原名为PagedList.Mvc) 1.工具--NuGet 程序包管理

  • ASP.NET MVC4 Razor模板简易分页效果

    一.无数据提交 第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下: public ActionResult PageIndex(string action, string controller, int currentPage, int pageCount) { //int count = db.Product.Count(); ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面 ViewBag.C

  • ASP.NET同步分页MvcPager使用详解

    最近接触了一下MvcPager,来做个笔记吧 其实,我喜欢前后端分离,分页这种东西前端负责的地方,后端不用顾问,这里的MvcPager有点让我想起服务器控件,毕竟用到了HtmlHelper. 但是挺方便的..以前我们写分页,后端会封装一Page<T>类,现在我们可以用MvcPager给我们提供好的PageList<T>,功能有点类似,不过MvcPager的功能要强大. 一.使用MvcPager这个控件,需要以下支持 1.后端MvcPager.dll引用: 2.前端需要Css:pag

  • ASP.NET MVC分页控件

    1.下载MvcPager.dll文件并引用到MVC项目中 2.在控制器中引用命名空间using Webdiyer.WebControls.Mvc; 3.获取数据集合,数据的总记录数(数据集合有多少条数据),设置每页记录数多少(每页显示多少条数据),获取当前页码(当前第几页) 例如: 4.创建视图,将换成 5.在web.config中的 6.在显示的数据下面 @Html.Pager(Model, new PagerOptions() { AlwaysShowFirstLastPageNumber

  • asp.net MVC分页代码分享

    本文实例为大家分享了MVC分页代码,供大家参考,具体内容如下 using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; using System.Web; using System.Text; using System.Web.Mvc; using System.Web.Routing; using System.Data.Objects.DataClasses; name

  • ASP.NET MVC4 HtmlHelper扩展类,实现分页功能

    1.扩展HtmlHelper类方法ShowPageNavigate public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) { var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; page

  • ASP.Net MVC+Data Table实现分页+排序功能的方法

    本文实例讲述了ASP.Net MVC+Data Table实现分页+排序功能的方法.分享给大家供大家参考,具体如下: 实现思路: 使用datatable内置的分页,排序 使用attribute+反射来控制需要排序和显示的字段以及顺序 分离排序和显示逻辑 若要添加搜索逻辑只需要传递搜索的字段到后端即可(js初始化时把"searching": false拿掉). View : @using BCMS.BusinessLogic @using BCMS.BusinessLogic.Model

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

  • 实现Asp.net mvc上传头像加剪裁功能

    在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcrop

  • 实现Asp.net mvc上传头像加剪裁功能

    在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcrop

  • thinkPHP5框架实现分页查询功能的方法示例

    本文实例讲述了thinkPHP5框架实现分页查询功能的方法.分享给大家供大家参考,具体如下: controller文件内Admin.php <?php namespace app\admin\controller; use think\Controller; use app\admin\model\Admin as AdminModel; //使用分页类 取别名解决类名冲突 class Admin extends Controller{ public function lst(){ /* 分页开

  • thinkphp框架无限级栏目的排序功能实现方法示例

    本文实例讲述了thinkphp框架无限级栏目的排序功能实现方法.分享给大家供大家参考,具体如下: 题目中我们并没有说明是tp5的无限级排序还是tp3的无限级排序就是为了让小新手们明白,这些功能的实现跟你使用的框架是没有关系的,不管你是tp5还是tp3还是laravel还是yii框架都没有关系,我们强调的是思路,是解决问题的方法,演示的时候因为我在用tp3所以无所谓了. 无限级栏目的排序非常简单,这次以博文的方式分享给大家解决的思路. 上图: 上图是我们实现的无限级分类,我们要注意两个字段,id和

  • Winform中GridView分组排序功能实现方法

    本文实例讲述了Winform中GridView分组排序功能实现方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 由于客户最近要扩充公司的业务,之前基于Winform+web开发混合式的系统已经不能满足他们的需求,需要从新对系统进行分区处理. 考虑到系统模块里面用到的GridView视图比较多,我就结合了DevExpress第三方GridControl简单的写了个Demo,对数据进行分组排序. 二.实现方法: 主程序源码: 复制代码 代码如下: using System; using S

  • Asp.net MVC实现生成Excel并下载功能

    本文实例为大家分享了Asp.net MVC实现生成Excel并下载的具体代码,供大家参考,具体内容如下 由于项目上的需求,需要导出指定条件的Excel文件.经过一翻折腾终于实现了. 现在把代码贴出来分享 (直接把我们项目里面的一部份辅助类的代码分享一下) 我们项目使用的是Asp.Net MVC4.0模式. 每个ActionResult必然会返回一个View或Json等(View或Json中的参数都是object类型的) 所以我们需要一个公共类来统一定义操作的"成功或失败"的状态或返回操

  • ASP.NET MVC 4 中的JSON数据交互的方法

    前台Ajax请求很多时候需要从后台获取JSON格式数据,一般有以下方式: 拼接字符串 return Content("{\"id\":\"1\",\"name\":\"A\"}"); 为了严格符合Json数据格式,对双引号进行了转义. 使用JavaScriptSerialize.Serialize()方法将对象序列化为JSON格式的字符串 MSDN 例如我们有一个匿名对象: var tempObj=new

  • Asp.net MVC中Razor常见的问题与解决方法总结

    前言 最近在学习Asp.net MVC Razor,在使用中遇到了不少的问题,所以想着总结下来,没有经验的童鞋就是这样磕磕碰碰出来的经验.话不多说,来一起看看详细的介绍: 一.Datatype的错误提示消息无法自定义 这也许是Asp.net MVC的一个Bug.ViewModel中定义了DataType为Date字段: [Required(ErrorMessage = "Birthday must be input!")] [DataType(DataType.Date, ErrorM

随机推荐