Unable to add button and variable value to data table using REST API

beginner_2018

While retrieving the SharePoint list items using REST , I was I tried to add button in specific column location and try to add variable value I am getting error as below.

unable to set property 'nTf' of undefined or null reference

Can any one please do let me know what's wring in my code

kthorngren

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

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

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