如何使用 Datatables 提交表单

Question

我使用 Datatables 提交调查问卷的答案。每个问题都在新页面中，下一个问题可通过 "Next" 按钮查看。我只想有一个提交按钮，它必须出现在所有问题的末尾。在我的代码中，它位于 table 下并且始终可见。我最大的问题是这个提交按钮只在数据库中插入最后一个问题，而不是所有问题。你能帮帮我吗？ :) 我的观点是：

    <html>
    <head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" type="text/css"  />
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

    <script>

     $(document).ready(function() {
        $('#example').dataTable( {
            "pagingType": "simple",
            "lengthMenu": [[1], [1]],
            "bSort": false,

             "language": {
        "paginate": {
          "previous": true
        }
      }


        } );

    } );

    </script>
    </head>
    <body>
      <?php 
    echo form_open('index/survey_fill/' .$survey_id  ); ?>
    <table  id="example" >
      <thead>
       <tr><th>Question</th></tr>
      </thead>   
      <tbody>
      <?php
     echo validation_errors();

     foreach ($survey as $row)
     { 
      
      ?>
      <tr>
     
         <td> 
      <?php echo "$row->question"; ?><br/>
      <?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
      $data=array(
       'name' =>  'answer['.$row->question_id.']',
       'value' => '5'
      );
              echo form_radio($data); 
      echo " 5 ";
      $data=array(
       'name' =>  'answer['.$row->question_id.']',
       'value' => ' 4'
      );
      echo form_radio($data);
      echo " 4";
             </td></tr>
   
 <?php 
 }

?> 
  
 </tbody>
</table> 
      <?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
    <input type="submit" id="button" name = "submit" value="Submit" class="btn btn-success"> 
    </form>
</div>
</body>
</html>

我的模型是：

   public function survey_fill() 
    {
        $answers=($this->input->post('answer'));
        
        if (null !==($this->input->post('submit'))) {
            $date = new DateTime("now"); 

            foreach($answers as $question_id=>$answer)
            {
                $data = array(
                    'user_id'=>$this->session->userdata['user_id'],
                    'question_id'=>$question_id,
                    'answer'=>$answer,              
                    'created_at'=>$date->format('Y-m-d H:i:s')
                );
            
             
                $this->db->insert('survey_answers', $data);
                
            }
              if($this->db->affected_rows() > 0)
            {
                 
                return true;
            } 
            return false;
        }
    }

Answer 1

我认为数据tables 对于您正在尝试做的事情来说实在是太过分了。就个人而言，我会在一组 div 中输出它，并使用 jQuery 切换来做一个简单的前后类型按钮，这样可以减少很多开销。还有非常低开销的分页解决方案就足够了。请记住，datatables 不仅重新格式化 table，而且它还有一个载入的 API 调用的百科全书，加上它所拥有的数据模型。 show/hide 类型测试需要很多。

无论如何，解决方案非常简单。用 <form> 标签包裹你的容器（不管它是什么，datatable 或 div）。将提交按钮放在末尾，然后通过您想要的任何方式 show/hide 或 enable/disable 。 Datatables 有一个 API 调用可以告诉您当前页面，您可以关闭它以启用您的按钮。由于按钮将在您关闭 <form> 之前，它将自动提交。

或者，您可以将容器包装在表单中，构建一个 jQuery .on('click') 事件来序列化表单并在需要时通过 Ajax 提交。如果你走这条路，关键是 preventDefault() 所以表格不会像 html 表格的标准那样自动提交。

如何使用 Datatables 提交表单

How to submit form with Datatables

forms

datatables

submit