首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从html字符串向jQuery DataTable添加多行

从HTML字符串向jQuery DataTable添加多行可以通过以下步骤实现:

  1. 首先,将HTML字符串转换为jQuery对象。可以使用jQuery的$()函数将HTML字符串包装成jQuery对象。例如,如果HTML字符串存储在变量htmlString中,可以使用$(htmlString)将其转换为jQuery对象。
  2. 接下来,使用jQuery DataTable的rows.add()方法向表格添加多行数据。该方法接受一个包含行数据的数组作为参数。可以通过遍历HTML字符串中的每个行元素,提取所需的数据,并将其存储在一个数组中。
  3. 最后,调用jQuery DataTable的draw()方法重新绘制表格,以显示新添加的行。这将更新表格的视图,使新行可见。

以下是一个示例代码,演示如何从HTML字符串向jQuery DataTable添加多行:

代码语言:javascript
复制
// 假设HTML字符串存储在变量htmlString中
var htmlString = '<tr><td>John</td><td>Doe</td></tr><tr><td>Jane</td><td>Smith</td></tr>';

// 将HTML字符串转换为jQuery对象
var $html = $(htmlString);

// 获取表格的jQuery DataTable实例
var table = $('#example').DataTable();

// 遍历每个行元素,提取数据并存储在数组中
var data = [];
$html.each(function() {
  var rowData = [];
  $(this).find('td').each(function() {
    rowData.push($(this).text());
  });
  data.push(rowData);
});

// 使用rows.add()方法向表格添加多行数据
table.rows.add(data);

// 调用draw()方法重新绘制表格
table.draw();

在上述示例中,假设表格的ID为example,HTML字符串中的每个行元素都包含两个<td>元素,分别表示姓名的姓和名。通过遍历HTML字符串中的每个行元素,提取姓名数据,并将其存储在一个二维数组中。然后,使用rows.add()方法将数据添加到表格中,并使用draw()方法重新绘制表格。

请注意,上述示例中的代码仅演示了如何从HTML字符串向jQuery DataTable添加多行。具体的实现可能因实际需求而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

datatables应用程序接口API

rows()DT 多行对象 rows.add()DT 添加多行 表格(Tables) 名称 说明 table().body()DT 得到表格 tbody节点 table().container()DT...遍历表格、列,行,单元格结果集 join()DT 给结果集数据以字符连接然后返回一个字符串 lastIndexOf()DT 返回与字符相匹配第一次出现的位置(后往前) lengthDT 返回结果集的长度...map()DT 通过回调函数,创建一个新的结果集 pluck()DT 返回指定属性结果集 pop()DT 结果集中移除最后一个项目 push()DT 添加一个多个项目到结果集 reduce()DT...实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique()DT 去重 unshift()DT 在结果集里从头添加一个或多个项目...http://datatables.club/manual/api.html

4.4K30
  • Datatables表格插件,你用过吗?

    Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。...这时候就有一个问题了,后台分页时如何知道你按多少数据分页的,你的排序方式是按哪个字段进行什么排序的。...在ajax请求中利用data属性动态实时获取用户输入的数据,并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求,这时请求参数就添加了需要的字段和值; <form...第一种实现方法是前端处理,在 createdRow:function (row, data, dataIndex) {}回调方法中获取到当前所在行的最后一列,然后把html添加进去。...//填充 td.html(html); } }); //搜索 function doSearch() { //重新请求一次dataTable

    6K30

    【8】数据浏览表格的快速输出

    但是好处在于,只要了解所有这些是如何实现和工作的,那么,我们对于页面的掌控的程度可以达到一个新的高度。...在实际的应用中,配合JQuery、CSS样式表和Ajax,可以发挥强大的威力,达到“无所不能”的境界。 表格还是列表? 输出数据库中数据列表,实际上就是以格式化的方法,把一个多行多列的数据展示出来。...用UL展示数据,直接写出的HTML代码,不加任何样式描述的话,列表的数据就显得混乱。因此,必须要有相应的CSS来配套。 2、多行多列的样式代码较复杂。...本着最简单的原则,表头可以DataTable中获取,如dt.Columns[i].ColumnName就可以返回dt的第i列的表名。...将上述处理放到一个独立的方法中,DataTable作为它的参数,表格生成就可以变得通用化了。 除了基本数据之外,表格生成还必须考虑其他的要求:列显示多少?行显示多少?列标题名?是否要添加控制列?

    2.5K50

    asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值

    首先贴上Jquery的ajax: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type...var dataObj = eval("(" + data + ")"); // $('#myList').html...转换为Json /// /// Datatable对象 /// Json字符串...UseHttpGet=true 然后尝试着运行,这是出问题列,无论怎样运行都不能调到后台方法: 最后在网上查列好久 才发现在新建的webservice页少了一句关键的话: // 若要允许使用 ASP.NET AJAX 脚本中调用此...,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次  2.对于服务器返回的JSON字符串,如果jquery异步请求将

    3.8K60

    常用C#代码「建议收藏」

    常用C#代码 字符串处理 1.字符串截取 //字符串截取 //从此实例检索子字符串。 子字符串指定的字符位置开始且具有指定的长度。...//如果要删除DataTable中的多行,应该采用倒序循环DataTable.Rows,而且不能用foreach进行循环删除,因为正序删除时索引会发生变化,程式发生异常,很难预料后果。...for (int i = 0; i < dt.Rows.Count; i++) { if (条件语句) { dtNew.Rows.Add(dt.Rows[i].ItemArray); //添加数据行...[i][j]; //获取DataTable行数: Int count = DataTable.Rows.Count; //DataTable添加行: DataRow dr = DataTable.NewRow...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/195508.html原文链接:https://javaforall.cn

    2.4K30

    jquery datatable 参数

    是否启用客户端过滤功能 bInfo true or false, default true 开关,是否显示表格的一些信息 bJQueryUI true or false, default false 是否使用jquery...通常与bServerSide,sAjaxSource等配合使用 iDisplayLength 整数,默认为10 用于指定一屏显示的条数,需开启分页器 iDisplayStart 整数,默认为0 用于指定哪一条数据开始显示到表格中去..., "bSmart": true } 又是初始时指定搜索参数相关的,有点复杂,没搞懂目前 sAjaxDataProp 字符串,default 'aaData' 指定当服务端获取表格数据时,数据项使用的名字...sAjaxSource URL字符串,default null 指定要从哪个URL获取数据 sCookiePrefix 字符串,default 'SpryMedia_DataTables_' 当打开状态存储特性后..."TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML

    22110
    领券