31
2018
03

JQuery插件DataTables 使用教程

前端页面


IndexView

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DataTables练习</title>
    <script src="~/Content/jquery.min.js"></script>
    <script src="~/Content/jquery.dataTables.min.js"></script>
    <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="~/Content/DataTables.js"></script>
    <script type="text/javascript">
        var AjaxObj = {
            'url': '/Home/GetData',
            'data': function (d) {
                d.groupname = $('#txt_search').val();
            }
        }

        var columns = [
            { "data": "ID" },
            { "data": "Name" },
            { "data": "IsUseStr" },
            { "data": "CreateTime" },
            { "data": null }
        ]

        var columnDefs = [{
            "targets": -1,
            "render": function (data, type, row, meta) {
                return "<input type = 'button' onclick='btnalert(\"" + row.ID + "\")'  value = '点击我!'>"
            }
        }];
        $(document).ready(function () {

            InitDataTables("table_id_example", AjaxObj, columns, columnDefs);

            $('#btn_search').click(function () {
                table.ajax.reload();

            });
        });
        function btnalert(id) {
            if (confirm("确定要删除吗?")) {
                alert("好的,删除记录" + id);
            }
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="txt_search" placeholder="条件查询" />

        <button type="button" id="btn_search">查询</button>
        <br />
        <table id="table_id_example" style="width:100%" class="display">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>IsUseStr</th>
                    <th>CreateTime</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>



DataTables.js文件

var table;

function InitDataTables(tableId, AjaxObj, ColumnsObj, ColumnDefs) {
    table = $('#' + tableId).DataTable({
        "processing": true,
        "searching": false,
        "serverSide": true,
        "lengthChange": false,
        "ordering": false,
        "paging": true,
        "pagingType": "full_numbers",
        "ajax": AjaxObj,
        "columns": ColumnsObj,
        //给table内自定义按钮
        "columnDefs": ColumnDefs,
        "language": {
            url: 'https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json'
        }
    });
}



后台服务端,数据接收与返回

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebDemo.Models;

namespace WebDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult IndexView()
        {
            return View();
        }


        public ActionResult GetData()
        {
            var data = new Arce().GetData();

            int PageIndex = this.Request["start"] != null ? int.Parse(this.Request["start"]) : 1;
            int PageSize = this.Request["length"] != null ? int.Parse(this.Request["length"]) : 20;
            string groupname = this.Request["groupname"];

            if (!string.IsNullOrEmpty(groupname))
                data = data.Where(table => table.Name.Contains(groupname));

            if (PageIndex == 0)
                PageIndex = 1;
            else
                PageIndex = (PageIndex / PageSize) + 1;


            var list = data.Take(PageSize * PageIndex).Skip(PageSize * (PageIndex - 1));


            return Json(new { aaData = list, iTotalRecords = list.Count(), iTotalDisplayRecords = data.Count() }, JsonRequestBehavior.AllowGet);
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebDemo.Models
{
    public class Arce
    {
        public Guid ID { get; set; }
        public string Name { get; set; }

        public string IsUseStr { get; set; }

        public string CreateTime { get; set; }

        public IQueryable<Arce> GetData()
        {
            var data = new List<Arce>();
            for (int i = 0; i < 1000; i++)
            {
                data.Add(new Arce() { ID = Guid.NewGuid(), CreateTime = DateTime.Now.ToString(), IsUseStr = ((i % 2) == 0 ? "可用" : "禁用"), Name = "姓名" + (i + 1) });
            }
            return data.AsQueryable();
        }

    }
}


修改DataTables的样式 4种默认风格


修改位置  class 的值


<table id="table_id_example" style="width:100%" class="cell-border">


blob.png

blob.png

blob.png

blob.png

blob.png

blob.png


blob.png




完成.

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。