jQuery Datatables 添加自定义表单元素

发布于 2024-10-18 10:25:51 字数 277 浏览 2 评论 0原文

我有一个带有基本 init 的数据表设置。我希望能够在表格下方有复选框和提交按钮。有没有办法自定义表格下方的信息“行”?

如果我只是在表格后面添加提交按钮,这就是它的样子 在此处输入图像描述

这就是我想要的样子 在此处输入图像描述

我需要一个解决 Javascript 开启或关闭的解决方案。

I have datatables setup with a basic init. I want to be able to have checkboxes and a submit button below the table. Is there any way to customize the information "row" below the table?

This is what it looks like if I just add the submit button after the table
enter image description here

This is what I want it to look like
enter image description here

I need a solution that accounts for Javascript being on or off.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

合约呢 2024-10-25 10:25:51

您对关闭 Javascript 的解决方案的要求是不可能的,因为只有在初始化 DataTable 时才会生成信息行。

信息行包装在 div 标签中,该标签根据初始化表的 ID 获取其 ID。

例如,如果您的表是这样声明的:

<table id='myTable'> </table>

信息行将在您的 DOM 中显示为

<div id='myTable_info' class='dataTables_info'> Showing 1 to 2 of 2 entries </div>

:要将“删除”按钮添加到信息行前面,您需要在每次呈现表时使用 fnDrawCallback 来包含该按钮。

$("#myTable").dataTable(
     {
           "fnDrawCallback": function()
            {
                 $("#myTable_info").prepend("<input type='button' value='Remove'>");
            }
     }
);

Your requirement for a solution that accounts for Javascript being turned off is not possible because the information row is generated only when you initialize the DataTable.

The information row is wrapped in a div tag that gets its ID based off of the ID of the initialized table.

For example, if your table was declared like this:

<table id='myTable'> </table>

The information row would appear in your DOM as this

<div id='myTable_info' class='dataTables_info'> Showing 1 to 2 of 2 entries </div>

To prepend the 'delete' button to your information row, you need to use fnDrawCallback to include the button each time the table is rendered.

$("#myTable").dataTable(
     {
           "fnDrawCallback": function()
            {
                 $("#myTable_info").prepend("<input type='button' value='Remove'>");
            }
     }
);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文