C#中DataTable格式数据直接在Html中以table格式展示（包含excel的header的样式实现）

在平常Web开发过程中会经常遇到将DataTable格式的数据在Html中显示而写着重复的代码，本文将依赖juery中DataTable插件来实现C#中DataTable格式数据直接在Html中显示而无需依赖其它组件：

如下是对juery中DataTable封装的js代码：

(function ($) {var defaults = {isExcelHeader: false,paging: false,searching: false,ordering: false,info: false,scrollX: true,autoWidth: true,        }$.fn.extend({initTable: function (json) {var jsonStr = json;if (typeof jsonStr === "object") {//判断是否为对象，如果为对象直接覆盖默认值$.extend(true, defaults, jsonStr)jsonStr = json.data;}var json = JSON.parse(jsonStr);var coloumDef = Object.keys(json[0]);//获取DataTable中表头数据var data = [];var column = [];if (!defaults.isExcelHeader) {for (var i = 0; i < json.length; i++) {data[i] = [];for (var j = 0; j < coloumDef.length; j++) {data[i][j] = json[i][coloumDef[j]];}}for (var i = 0; i < coloumDef.length; i++) {column[i] = { title: coloumDef[i] };}} else {for (var r = 0; r <= json.length; r++) {data[r] = [];for (var c = 0; c < coloumDef.length; c++) {if (r == 0) {column[c + 1] = { title: numToExcelHeader(c) }data[r][c + 1] = coloumDef[c];} else {data[r][c + 1] = json[r - 1][coloumDef[c]];}if (c == 0) {data[r][0] = r + 1;column[c] = { title: "" };}}}}var $table = $(this);$table.dataTable({paging: defaults.paging,searching: defaults.searching,ordering: defaults.ordering,info: defaults.info,scrollX: defaults.scrollX,autoWidth: defaults.autoWidth,data: data,columns: column});}});
})(jQuery);function numToExcelHeader(col) {//将列转为Excel的Header格式var ordA = 'A'.charCodeAt(0);var len = 'Z'.charCodeAt(0) - 'A'.charCodeAt(0) + 1;var s = '', c = col;while (c >= 0) {s = String.fromCharCode(c % len + ordA) + s;c = Math.floor(c / len) - 1;}return s;
}

以上代码我是直接作为table.js文件引入到前端代码中，本文用的aspx作为Web开发，对应的前端代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Table.aspx.cs" Inherits="TBCore.Web.Report.Table" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>DataTable显示</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no" /><link href="../styles/jquery/bootstrap.min.css" rel="stylesheet" /><link href="../styles/jquery/jquery.dataTables.css" rel="stylesheet" /><script src="../scripts/jquery/jquery.min.js"></script><script src="../scripts/jquery/bootstrap.min.js"></script><script src="../scripts/jquery/jquery.dataTables.min.js"></script><script src="../scripts/report/table.js"></script>
</head>
<body><form id="form1" runat="server"><div style="width:60%;"><table class="table cell-border hover stripe" id="datalist" cellspacing="0" style="width:100%"></table></div></form><script type="text/javascript">$(function () {$.ajax({type: "POST",url: "Table.aspx/GetData",contentType: "application/json; charset=utf-8",dataType: "json",data: null,success: function (res) {$("#datalist").initTable({ data: res.d, isExcelHeader: false });//此处方法调用也可以直接传入数据即可，传入对象的可覆盖默认设置，如是否分页等等},error: function (res) {console.log(res);}});});</script>
</body>
</html>

调用封装的方法：$(dom).initTable(data);前端代码基本就是这么，下面就是后台数据处理，在数据传到前端之前需要对Datatable数据进行序列化为json字符串，序列话代码如下：

public static string DataTableToJson(DataTable dt){StringBuilder JsonString = new StringBuilder();                if (dt != null && dt.Rows.Count > 0){JsonString.Append("[ ");for (int i = 0; i < dt.Rows.Count; i++){JsonString.Append("{ ");for (int j = 0; j < dt.Columns.Count; j++){if (j < dt.Columns.Count - 1){JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");}else if (j == dt.Columns.Count - 1){JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");}}/**//**//**//*end Of String*/if (i == dt.Rows.Count - 1){JsonString.Append("} ");}else{JsonString.Append("}, ");}}JsonString.Append("]");return JsonString.ToString();}else{return null;}}

以上是基本都可以复用的代码，如下是本例的后台对应的ajax请求，也是用c#实现的：

        public static string GetData(){DataTable dt = new DataTable();dt.Columns.Add("序号", typeof(string));dt.Columns.Add("姓名", typeof(string));dt.Columns.Add("职业", typeof(string));dt.Columns.Add("年龄", typeof(string));for(int i=1; i <=30; i++){DataRow dr = dt.NewRow();dr.ItemArray = new object[] { i, "小明" + i, "程序员" + i, i };dt.Rows.Add(dr);}return DataTableToJson(dt);}

下图分别是带用excel头和直接展示的两种效果：

C#中DataTable格式数据直接在Html中以table格式展示（包含excel的header的样式实现）相关推荐

Python语言编程学习：numpy中的array格式数据切片与pandas中的dataframe格式数据切片、相互转换
Python语言编程学习:numpy中的array格式数据切片与pandas中的dataframe格式数据切片.相互转换目录 numpy中的array格式数据切片与pandas中的dataframe ...
读取excel中的表格数据到字典dict中--python
读取excel中的表格数据到字典dict中--python: 工作中需要把excel表格中的数据读取出来放到字典中,便于检索和数据处理主要有两种常用方式: 1.表头在第一行,其他行都是数据 2.表头 ...
wps怎么导入access_mysql数据库中的表格数据如何导入wps中的excel，请问该怎么去做 | excel连接access数据库...
怎么把excel文件里的数据导入SQL数据库? 导据不一定要用OPENSET函数以用更简单的方法,步骤如下: 1.双击打sqlserver,右击需要导入数据的数据库,如图所示. 2.点击任务,再点击任 ...
html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
BSQ格式数据转换为RSD缺省的BIP格式数据
李国春 RSD内部统一以BIP格式排列数据,并且文件格式(非TFS)数据倒放(North Down).早期是为了和设备无关位图(DIB)一致节省一点处理时间.现在设备处理能力增强了这点时间已经无关紧要 ...
php字符串定义为arraylist,如何把arraylist集合中的字符串数据保存的文本文件中
分析: (推荐教程:java课程) 通过题目的意思我们可以知道如下内容:ArrayList集合里存储的是字符串遍历ArrayList集合,把数据获取然后存储到文本文件中文本文文件说明使用文本文件 ...
java语言中的浮点型数据分为,Java语言中的浮点型数据根据数据存储长度和数值精度的不同，进一步分为float型和double型，其中dou...
Java语言中的浮点型数据根据数据存储长度和数值精度的不同,进一步分为float型和double型,其中dou 更多相关问题 [单选题]下列因素中不是经济中内在稳定器的是 [单选题]外在时滞是以下哪两 ...
python脚本：向表中插入新数据，删除表中最旧的数据
一张表存储历史数据,最多存储HISTORY_TABLE_MAX_ROWS条数据,当表中数据未达到HISTORY_TABLE_MAX_ROWS,直接插入:如果达到的话需要保证插入新数据的时候将最旧的数据 ...
python代码中怎么增加数据_python 实现数据库中数据添加、查询与更新的示例代码...
一.前言最近做web网站的测试,遇到很多需要批量造数据的功能:比如某个页面展示数据条数需要达到10000条进行测试,此时手动构造数据肯定是不可能的,此时只能通过python脚本进行自动构造数据:本次 ...

C#中DataTable格式数据直接在Html中以table格式展示（包含excel的header的样式实现）

C#中DataTable格式数据直接在Html中以table格式展示（包含excel的header的样式实现）相关推荐

最新文章

热门文章