jQuery Datatables添加自定义表单元素 [英] jQuery Datatables adding custom form elements

问题描述

我有一个基本的初始化设置的数据表。我想要能够在表格下方有复选框和提交按钮。有没有办法自定义表格下方的行？

这是什么，如果我只是在表后添加提交按钮

这就是我想要的它看起来像

解决方案

您需要解决JavaScript的问题被关闭是不可能的，因为只有当您初始化DataTable时才会生成信息行。

信息行被包装在一个div标签中，该标签根据初始化表的ID。

例如，如果您的表格如下所示：

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

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

 < div id ='myTable_info'class ='dataTables_info'>显示2个条目中的1到2< / div> 
  

要在信息行中添加删除按钮，您需要使用fnDrawCallback包含按钮每次表格呈现时。

  $（＃myTable）。dataTable（
 {
 fnDrawCallback：function（）
 {
 $（＃myTable_info）。prepend（< input type ='button'value ='Remove'>）; 
} 
} 
）; 
  

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

This is what I want it to look like

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

解决方案

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'>");
            }
     }
);

这篇关于jQuery Datatables添加自定义表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！