Answers

• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  May 2018

  You have 4 columns defined in your thead:

              <thead>
                  <tr>
                      <th>Name</th>
            <th>Order</th>
            <th>Submited</th>
                      <th style="width:50px">Operation</th>
                  </tr>
              </thead>
  

  But in your columns you defined 3:

                  "aoColumns": [
                      {
                          "mData": "Title"
                      },
            {
                          "mData": "Order"
                      },
            {
                          "mData": submited
                      }
                  ],
  

  You need to define 4. Set the 4th column to mData: null, and move you columnDefs button config into the 4th column in columns.

  Kevin
• beginner_2018 Posts: 46Questions: 19Answers: 0

  May 2018 edited May 2018

  Sir,

  Yes, I had three columns .But I also added button .
  And I am unable to add the button in specific location.

  $('#table_id').DataTable({
              "aaData": data.d.results,
              "aoColumns": [
                  {
                      "mData": "Title"
                  },
                                      {
                      "mData": "Order"
                  },
                                      {
                      "mData": submited
                  }
              ],
              dom: "Bfrtip",
              buttons: [
                  {
                      text: "My button",
                      action: function ( e, dt, node, config ) {
                          alert("Button activated");
                      }
                  }
  
              ],
              columnDefs: [ {
                  "targets": 1,
                  "data": null,
                  "defaultContent": "<input type='button' value='Button' onclick='alert(\"Click Me.\")'/>"
              }]
          });
  

  Also, I had moved the button in "aoColumns" ,But find no luck.
  Can you please extend your support in helping me about below code

  $('#table_id').DataTable({
              "aaData": data.d.results,
              "aoColumns": [
                  {
                      "mData": "Title"
                  },
                                {
          dom: "Bfrtip",
          buttons: [
            {
              text: "My button",
              action: function ( e, dt, node, config ) {
                alert("Button activated");
              }
            }
  
          ],
          columnDefs: [ {
            "targets": 1,
            "data": null,
            "defaultContent": "<input type='button' value='Button' onclick='alert(\"Click Me.\")'/>"
          }]
         },
        {
                      "mData": "Order"
                  }
              ],
  
          });
  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  May 2018 Answer ✓

  Without a test case its a bit confusing to understand what you are trying to do.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  I put together this example which may help:
  http://live.datatables.net/legusoha/1/edit

  It uses columns.render to display the button. It uses the meta parameter to get the row ID which is used to give each button its own ID. I have an event handler which prints on the console the Button's ID.

  Kevin