利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表
作者：夜无痕星
字体：[ ] 类型：转载 时间：
jQuery dataTables 插件是一个优秀的表格插件，应用非常广泛，本文给大家介绍利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
jQuery dataTables 插件是一个优秀的表格插件，是后台工程师的福音！它提供了针对数据表格的排序、浏览器分页、服务器分页、查询、格式化等功能。dataTables 官网也提供了大量的演示和详细的文档进行说明，为了方便使用，这里进行详细说明。
去官网： 下载最新版本是v1.10.12。
在页面引入:
&link rel="stylesheet" href="~/Content_Admin/css/bootstrap.min.css" /&
&link rel="stylesheet" href="~/Content_Admin/css/bootstrap-responsive.min.css" /&
&script type="text/javascript" src="~/Content_Admin/js/jquery.min.js"&&/script&
&script type="text/javascript" src="~/Content_Admin/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="~/Content_Admin/js/jquery.dataTables.min.js"&&/script&
HTML代码： 写上&thead&&/thead&标头即可
&div class="widget-content nopadding"&
&table id="archives-table" class="table table-bordered data-table mydatatable"&
&th&编号&/th&
&th&标题&/th&
&th&所属类别&/th&
&th&浏览量&/th&
&th&评论量&/th&
&th&点赞量&/th&
&th&状态&/th&
&th&操作&/th&
&th&操作&/th&
&th&操作&/th&
&tbody&&/tbody&
客户端jQuery：
$('#archives-table').dataTable({
"oLanguage": {
"sProcessing": "&img src='/Content_Admin/img/spinner.gif'& 努力加载数据中...",
"sLengthMenu": "每页显示&_MENU_ &条结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",
"infoEmpty": "0条记录", //筛选为空时左下角的显示"
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从_MAX_条数据中检索)",//筛选之后的左下角筛选提示，
"sZeroRecords": "没有检索到数据",
//"sSearch": '&span class="label label-success"&&搜索&&/span&'
//"bServerSide": false, //第一种场景:服务端一次性取出所有数据,完全由客户端来处理这些数据.此时为false
"bServerSide": true, //第二种场景:服务端处理分页后数据,客户端呈现,此时为true.但此时aoColumns要变,将'sName'换成mDataProp,同时自定义列也要有对应的数据
"sServerMethod": "GET",
"sAjaxSource": "/Admin/AdminArchives/GetArchivesJson", //ajax Url地址
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true, //客户端传给服务器的参数为sSearch
'bFilter': false,
//'bsearch':true,
'bLengthChange': true,
'aLengthMenu': [
[5, 15, 20, -1],
[5, 15, 20, "全部"] // change per page values here
'iDisplayLength': 7, //每页显示10条记录
'bAutoWidth': true,
"scrollX": true,
"aoColumns": [
{ "sWidth": "5%", "mDataProp": "Id" },
"sWidth": "40%",
"mDataProp": "Title",
"mRender": function (data, type, row) {
return '&a href="/Archives/Index/' + row.Id + '\"&' + data + '&/a&';
{ "sWidth": "10%", "mDataProp": "CategoryName" },
{ "sWidth": "6%", "mDataProp": "ViewCount", "bStorable": true },
{ "sWidth": "6%", "mDataProp": "CommentCount", "bStorable": true },
{ "sWidth": "6%", "mDataProp": "Digg", "bStorable": true },
"sWidth": "6%",
"mDataProp": "Status",
"mRender": function (data, type, row) {
var value = "已发布";
if (data == "0")
value = "禁用";
{ //自定义列 : 启用/禁用
"mDataProp": "null",
"sWidth": "6%",
"bSearchable": false,
"bStorable": false,
"mRender": function (data, type, row) {
var actionstr = '&a id="publicarticle" class="publicaction" target-id="' + row.Id + '" href="#"&发 布&/a&';
if (row.Status == "1")
actionstr = '&a id="delarticle" class="delaction" target-id="' + row.Id + '" href="#"&禁 用&/a&';
{ //自定义列 : real删除
"mDataProp": "null",
"sWidth": "6%",
"bSearchable": false,
"bStorable": false,
"mRender": function (data, type, row) {
return '&a id="realdelarticle" class="tip" target-id="' + row.Id + '" href="#"&&i class="icon-remove"&&/i&&/a&';
{ //自定义列：编辑
"mDataProp": "null",
"sWidth": "6%",
"bSearchable": false,
"bStorable": false,
"mRender": function (data, type, row) {
return '&a class="tip" href="/Admin/AdminArchives/EditArchive/' + row.Id + '"&&i class="icon-pencil"&&/i&&/a&';
"aoColumnDefs": [
//报错：DataTables warning : Requested unknown parameter '1' from the data source for row 0
//加上这段定义就不出错了。
sDefaultContent: '',
aTargets: ['_all']
Jquery.DataTables插件的两种应用场景
场景一：服务端一次性取出所有数据,完全由客户端来处理这些数据.此时"bServerSide": false,
服务端代码:
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
#region 1.0 场景一
////1. 获取所有文章
//List&Article& DataSource = articleService.GetDataListBy(a =& true, a =& a.Id);
////2. 构造aaData
//var data = DataSource.Select(a =& new object[]{
// a.Title+ " ("+a.SubTime.ToString()+")",
// (categoryService.GetDataListBy(c=&c.Id==a.CategoryId)[0]).Name,
// a.ViewCount,
// commentService.GetDataListBy(c=&c.CmtArtId==a.Id).Count,
// a.Digg,
// a.Status==1?"正常":"删除"
////3. 返回json,aaData是一个数组，数组里面还是字符串数组
//return Json(new
// sEcho = 1,
// iTotalRecords = DataSource.Count,
// iTotalDisplayRecords = data.Count(),
// aaData = data
//}, JsonRequestBehavior.AllowGet);
#endregion
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
场景二：服务端处理分页后数据,客户端呈现,此时为true，
服务端代码:
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
#region 2.0 场景二
//客户端需要"bServerSide": true, 用mDataProp绑定字段,obj.aData.Id获取字段(.属性)
//0.0 全部数据
List&Article& DataSource = articleService.GetDataListBy(a =& true);
//DataSource = DataSource.OrderByDescending(a =& a.SubTime).ToList();
//1.0 首先获取datatable提交过来的参数
string echo = tableParam.sE //用于客户端自己的校验
int dataStart = tableParam.iDisplayS//要请求的该页第一条数据的序号
int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayL//每页容量（=-1表示取全部数据）
string search = tableParam.sS
//2.0 根据参数(起始序号、每页容量、参训参数)查询数据
if (!String.IsNullOrEmpty(search))
var data = DataSource.Where(a =& a.Title.Contains(search) ||
a.Keywords.Contains(search) ||
a.Contents.Contains(search))
.Skip&Article&(dataStart)
.Take(pageSize)
.Select(a =& new
Id = a.Id,
Title = a.Title + " (" + a.SubTime.ToString() + ")",
CategoryName = a.Category.Name,
ViewCount = a.ViewCount,
CommentCount = commentService.GetDataListBy(c =& c.CmtArtId == a.Id).Count,
Digg = a.Digg,
Status = a.Status
}).ToList();
//3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组：即里面是一个数组[["","",""],[],[],[]]
return Json(new
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
var data = DataSource.Skip&Article&(dataStart)
.Take(pageSize)
.Select(a =& new
Id = a.Id,
Title = a.Title + " (" + a.SubTime.ToString() + ")",
CategoryName = a.Category.Name,
ViewCount = a.ViewCount,
CommentCount = commentService.GetDataListBy(c =& c.CmtArtId == a.Id).Count,
Digg = a.Digg,
Status = a.Status
}).ToList();
//3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组：即里面是一个数组[["","",""],[],[],[]]
return Json(new
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
#endregion
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
其中dataTables发送的参数被分装在jqDataTableParameter.cs中：
/// &summary&
/// 在服务器端,可以通过以下请求参数来获得当前客户端的操作信息
/// jquery $('selector').datatable()插件 参数model
/// &/summary&
public class jqDataTableParameter
/// &summary&
/// 1.0 DataTable用来生成的信息
/// &/summary&
public string sEcho { }
/// &summary&
/// 2.0分页起始索引
/// &/summary&
public int iDisplayStart { }
/// &summary&
/// 3.0每页显示的数量
/// &/summary&
public int iDisplayLength { }
/// &summary&
/// 4.0搜索字段
/// &/summary&
public string sSearch { }
/// &summary&
/// 5.0列数
/// &/summary&
public int iColumns { }
/// &summary&
/// 6.0排序列的数量
/// &/summary&
public int iSortingCols { }
/// &summary&
/// 7.0逗号分割所有的列
/// &/summary&
public string sColumns { }
public class jqDataTableParameter
后台效果展示：
以上就是对datatable插件的使用说明。
以上所述是小编给大家介绍的利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Bootstrap 使用对话框插件时怎样传值 - 开源中国社区
当前访客身份：游客 [
当前位置：
我想在点击删除之后弹出一个对话框，然后再点击确定按钮之后，请求删除链接，要怎么实现呢，还需要自己写js代码吗？不是很明白。
ps：本人的js很烂，希望大家不要嫌弃我的问题很白菜。
共有6个答案
<span class="a_vote_num" id="a_vote_num_
请参考我的文章
里边有你想要的实现逻辑
<span class="a_vote_num" id="a_vote_num_
引用来自“恺哥”的答案 请参考我的文章
里边有你想要的实现逻辑
<span class="a_vote_num" id="a_vote_num_
function delete() {return confirm('确定要删除');} 方便简单最重要
--- 共有 4 条评论 ---
: 问题不是我问的。。。
(4年前)&nbsp&
点删除的时候
修改ID就行了
(4年前)&nbsp&
那你在确认按钮那加删除链接 url/action=delete&id=[id*]
(4年前)&nbsp&
如果整体的是bootstrap的风格，被你这样来一下，就很粗暴的感觉
(4年前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
用户体验也很重要，直接关系到你的app是否能够存活，项目是否能通过验收
<span class="a_vote_num" id="a_vote_num_
这个嘛，你想想啊，一个表格，右边点击编辑，然后你自动把当前行按每列的数据赋值到编辑框中，然后弹出来编辑，写js实现吧，不难的
<span class="a_vote_num" id="a_vote_num_
哈哈，我自己想到了一个方法，就是用js代码修改确定按钮的href属性，让它请求链接就好了
--- 共有 1 条评论 ---
请问问题解决了吗？我的还是不行http://www.oseye.net/question/116#answer-138
用的是这个上面的方法
(4年前)&nbsp&
更多开发者职位上
有什么技术问题吗？
敲代码的...的其它问题
类似的话题全面解析Bootstrap弹窗的实现方法
作者：傻籽
字体：[ ] 类型：转载 时间：
这篇文章全面解析Bootstrap弹窗的实现方法，对其结构进行详细分析，感兴趣的小伙伴们可以参考一下
一. 结构分析&
　　Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
　　&#9745; 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
　　&#9745; 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
　　&#9745; 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
&div class="modal" id="mymodal"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal"&&span aria-hidden="true"&&&/span&&span class="sr-only"&Close&/span&&/button&
&h4 class="modal-title"&模态弹出窗标题&/h4&
&div class="modal-body"&
&p&模态弹出窗主体内容&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button type="button" class="btn btn-primary"&保存&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --&
&/div&&!-- /.modal --&
二 . data-toggle类触发弹窗(无需写JS)
1 . 模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target.
&!-- data-target触发模态弹出窗元素 --&
&button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button"&通过data-target触发&/button&
&!-- 模态弹出窗内容 --&
&div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal"&&span aria-hidden="true"&&&/span&&span class="sr-only"&Close&/span&&/button&
&h4 class="modal-title"&模态弹出窗标题&/h4&
&div class="modal-body"&
&p&模态弹出窗主体内容&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button type="button" class="btn btn-primary"&保存&/button&
2 . data-参数说明
　　除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。
&三 . JS触发弹窗(要写JS)
　　1 . 除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。
&button class="btn btn-primary" type="button"&点击我&/button&
&div class="modal" id="mymodal"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal"&&span aria-hidden="true"&&&/span&&span class="sr-only"&Close&/span&&/button&
&h4 class="modal-title"&模态弹出窗标题&/h4&
&div class="modal-body"&
&p&模态弹出窗主体内容&/p&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button type="button" class="btn btn-primary"&保存&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --&
&/div&&!-- /.modal --&
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
2 . 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
&事件设置：
$('#myModal').on('hidden.bs.modal', function (e) {
// 处理代码...
四 . 弹窗尺寸
Bootstrap框架还为模态弹出窗提供了不同尺寸.
　　一个是大尺寸样式"modal-lg”.
&divclass="modal-dialog modal-lg"&
&divclass="modal-content"& ... &/div&
　　另一个是小尺寸样式"modal-sm”.
&divclass="modal-dialog modal-sm"&
&divclass="modal-content"& ... &/div&
如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：
以上就是关于Bootstrap弹窗的实现方法的全部介绍，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具bootstrap的模态版model使用（将页面参数传递到model并显示）
-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
将页面数据传递到modal的首要步骤：把要传过去的值添加在在触发模态框的标签上
然后通过js把值从页面传递到模态框中：
$(function() {
$('#discussionModifyModal').on('show.bs.modal', function
&var a = $(event.relatedTarget) // a that
triggered the modal
&var id = a.data('id'), title =
a.data('title'), description =
a.data('description');&
&var modal = $(this)
&modal.find('#cm-modal-id').val(id);
&modal.find('#cm-modal-title').val(title);
&modal.find('#cm-modal-content').val(description);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}