How can i add a form in each row in HTML datatables?

Question

I have an ordinary table generated with Ajax sourced data, it looks like this:

Ajax

<script>
 $(document).ready(function() {
    $('#mytable').DataTable( {
        "ajax": "myurl",
        "dataType": 'json',
        "dataSrc": '',

        "columns": [
          {"data": "item"},
          {"data": "status"},
          {"data": "price"},
      ]

    } );
} );
</script>

Html

 <table id="mytable" class="display" style="width:100%">
  <thead>
      <tr>
          <th>ITEM</th>
          <th>STATUS</th>
          <th>PRICE</th>
      </tr>
  </thead>
</table>

I would like to add a new column to this table, basically each row should have a form that, when hit, will fire an Ajax request containing the value of the field Status, so i should have:

<th>ITEM</th>
<th>STATUS</th>
<th>PRICE</th>
<th>BUTTON</th>

Here is my form:

<script>
$(document).ready(function () {
    $("#myform").submit(function (event) {
        callAJAX( "myurl/",
         {"X-CSRFToken": getCookie("csrftoken") },
         parameters={'status': $('status').val()},

        'post',
         function(data){
          console.log('submitted')


         }, null, null );
 return false; 
  });

});
</script>



<form method='post' id='myform'>
  {% csrf_token %}
  <input type="hidden" id="status"/>
  <button name="button1" type="submit" class="btn btn-primary">SEND</button>
</form>

So, each row has four fields: item, status, price, button. On every row there is a button below the column button. When the button on a row is hit, ajax should send a post request with the value of status for that particular row. Is there any way to do it? The biggest problem here is adding the form to Datatable, i did not find much about how to do it. Any advice is appreciated

devlin carnate · Accepted Answer · 2019-11-25 22:56:30Z

1

You don't need a form if you're submitted the value via AJAX. You can add an event handler to capture the button click event, and then send the value via AJAX. You know that the value you want to send is in the same row as the button that was clicked. You can traverse the DOM to get the value, or, just add the value as a data attribute to the button when you're building out the rows of the DataTable.

$('#mytable').DataTable( {
    "ajax": "myurl",
    "dataType": 'json',
    "dataSrc": '',

    "columns": [
      {"data": "item"},
      {"data": "status"},
      {"data": "price"},
      {"data": "status"}
  ],
  "columnDefs": [
            {
                "targets": [3],
                "searchable": false,
                "orderable": false,
                "render": function (data, type, full) {
                    return '<button type="button" class="btnClick" data-status="replace">Send</button>'.replace("replace", data);
                }
            }
        ]
} );

So, with the code above, I've added a 4th column that holds the Status value, and that value is rendered as a data attribute on a button. I also added a class so that it's easy to bind a click event:

$(document).on('click','.btnClick', function() {
   var statusVal = $(this).data("status");
   console.log(statusVal);
   //do the AJAX call...
});

Here is a Fiddle Demo (You'll notice that I had to adjust data source for the DataTable for the purpose of the example)

edited Nov 25, 2019 at 22:56

answered Nov 25, 2019 at 22:09

devlin carnate

8,6617 gold badges55 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jack022 Over a year ago

Hey! Thanks for your answer, this is truly great. I can see the send button appearing, the only problem is that nothing happens when i hit it. I tried to look into my console but there is no error popping there. Thanks for your help again!

devlin carnate Over a year ago

@Jack022 - Sounds like the jQuery event isn't firing. If you inspect the HTML of a button, is it structured correctly? Is it rendering with the data attribute?

Jack022 Over a year ago

Yeah, it seems to be structured correctly, i'm trying to see what's wrong!

Jack022 Over a year ago

Yeah, the event is not firing. I tried adding a dummy console.log() inside the success function but it doesn't work

devlin carnate Over a year ago

@Jack022 - I updated my answer and added a link to a Fiddle demo. You'll see that it console logs the status based on the clicked-on button.

|

Collectives™ on Stack Overflow

How can i add a form in each row in HTML datatables?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related