从datatable中获取隐藏的行内容，并将其与表单一起提交 [英] get hidden row content from datatable and submit it along with the form

问题描述

我遇到了一个问题，现在吃了我的时间。我有一个有7个记录的表（例如），这个表有输入和textarea元素，用户可以在其中键入。现在分页的值为每页5个记录，我有两个页面。用户将数据输入评论部分，点击分页中的下一步，并在评论部分输入值。从技术上讲，用户可以通过数据分页逻辑分割两个页面的值。问题是，当用户点击保存时，它只保存那些在焦点上的元素，更容易理解，这些在页面上是可见的。我阅读了API和常见问题解答，并清楚地表明datatable隐藏了不重点的元素，使得它们几乎不可能在DOM中找到。以下是代码，我需要帮助我如何使用fnGetHiddenTrNodes（）方法从隐藏的行获取数据，创建隐藏的元素，并在提交表单之前将它们附加到现有的可见表单元素中。我尝试了以下代码，但它不工作。 on（submit，function（）{
if（$（$（$）

$ ＃form）。valid（））{

var nNodes = oTable.fnGetHiddenTrNodes（）;
for（var i = 0; i< nNodes.length; i ++）
{
var nHidden = document.createElement（'input'）;
nHidden.type ='hidden';
nHidden.name =hidden_​​input _+ i;
nHidden。 value = $（'input'，nNodes）.val（）;

//alert(nHidden.value）;
this.appendChild（nHidden）;
}

$（＃form）。submit（）;


} else {
validator.focusInvalid（）;
return false;
}

}）;

非常感谢任何帮助。

解决方案

好的。时间结束感谢@Bret给我一个方向。以下是最终工作的代码片段 -

  $（＃form）。on（submit，function {
 if（$（＃form）。valid（））{
 
 var nNodes = oTable.fnGetHiddenTrNodes（）; 
 
 $（'td' ，nNodes）.each（function（index，ncolumn）{
 
 var nHidden = document.createElement（'input'）; 
 nHidden.type ='hidden'; 
 nHidden .name = $（input，ncolumn）.attr（name）; 
 nHidden.value = $（input，ncolumn）.val（）; 
 
 if typeof（nHidden.name）！=undefined）
 $（＃form）。append（nHidden）; 
 
 nHidden = document.createElement（'input'）; 
 nHidden.type ='hidden'; 
 nHidden.name = $（textarea，ncolumn）.attr（name）; 
 nHidden.valu e = $（textarea，ncolumn）.val（）; 
 
 if（typeof（nHidden.name）！=undefined）
 $（＃form）。append（nHidden）; 
 
 nHidden = document.createElement（'input'）; 
 nHidden.type ='hidden'; 
 nHidden.name = $（textarea，ncolumn）.attr（name）; 
 nHidden.value = $（textarea，ncolumn）.val（）; 
 
 if（typeof（nHidden.name）！=undefined）
 $（＃form）。append（nHidden）; 
 
 nHidden = document.createElement（'input'）; 
 nHidden.type ='hidden'; 
 nHidden.name = $（select，ncolumn）.attr（name）; 
 nHidden.value = $（select，ncolumn）.attr（value）; 
 
 if（typeof（nHidden.name）！=undefined）
 $（＃form）。append（nHidden）; 
 
}）; 
 
 clickedSave = true; 
 
 
} else {
 validator.focusInvalid（）; 
返回false; 
} 
 
}）; 
  

谢谢。

I'm stuck with an issue and its eating my time now. I have a table with 7 records (for instance) and this table has input and textarea elements, where a user can type in. Now with pagination having the value as 5 records per page, I have two pages. The user enters data into comments section, clicks on the "next" in the pagination and enters value in the comments section. So technically, the user entered values into both the pages as splitted by datatable pagination logic. The problem is, when the user hits save, its saving only those elements which are on focus, more easy to understand which are visible on the page. I read the API and FAQs, and its clear that datatable hides the elements which are not in focus, making them practically impossible to find in DOM. Below is the code and I need help on how can I get the data from the hidden rows using the fnGetHiddenTrNodes() method, create hidden elements and append them to the existing visible table elements before submitting the form. I tried the below code, but it isn't working.

    $("#form").on("submit",function(){
       if($("#form").valid()){

           var nNodes = oTable.fnGetHiddenTrNodes();
           for ( var i=0 ; i<nNodes.length ; i++ )
           {
               var nHidden = document.createElement( 'input' );
               nHidden.type = 'hidden';
               nHidden.name = "hidden_input_"+i;
               nHidden.value = $('input', nNodes).val();

               //alert(nHidden.value);
               this.appendChild( nHidden );
           }

           $("#form").submit();   


       }else {
           validator.focusInvalid();
           return false;
       }

   });

Any help is greatly appreciated.

解决方案

Alright.! Time to wrap up. Thanks to @Bret for giving me a direction. Below is the code snippet that's finally working -

      $("#form").on("submit",function(){
        if($("#form").valid()){

            var nNodes = oTable.fnGetHiddenTrNodes();

                    $('td', nNodes).each(function(index,ncolumn) {

                        var nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("input", ncolumn).attr("name");
                        nHidden.value = $("input", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("textarea", ncolumn).attr("name");
                        nHidden.value = $("textarea", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("textarea", ncolumn).attr("name");
                        nHidden.value = $("textarea", ncolumn).val();

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                        nHidden = document.createElement( 'input' );
                        nHidden.type = 'hidden';
                        nHidden.name = $("select", ncolumn).attr("name");
                        nHidden.value = $("select", ncolumn).attr("value");

                        if(typeof(nHidden.name)  != "undefined")
                        $("#form").append( nHidden );

                    });

            clickedSave = true;


        }else {
            validator.focusInvalid();
            return false;
        }

    });  

Thanks.

这篇关于从datatable中获取隐藏的行内容，并将其与表单一起提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！