How to add buttons in multiple columns jQuery DataTable?

Question

I want to add buttons in multiple columns of jQuery dataTable. I am able to add multiple buttons in a single column. But, I need individual buttons in separate columns. I am binding data to table using AJAX method(JSON Data).

Here is my code to add multiple buttons in a single column. Can someone help me, how to separate these buttons into different columns.

function loadtable() {
  $.ajax({
    type: "POST",
    url: "../WebMethods/GetData.asmx/getScheduledTests",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      var json = JSON.parse(data.d);
      table1 = $('#myTable').DataTable({
        data: json,
        columns: [
          { className: "hide", data: 'TestId' },
          { data: 'TestKey' },
          { data: 'TestType' },
          { data: 'ClassName' },
          { data: 'SubjectName' },
          { data: 'NoOfQuestions' },
          { data: 'TotalQuestions' },
          { mRender: function (data, type, row) {
              return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
            }
          }
        ]
      });
    }
  });
}

Here I have added 2 buttons as view concepts and View question paper in a single column. I need this to be in separate column. Please help. Thanks in advance

I tried adding one more mRender. But, it throws an error. Datatable will not be initialized if I add one more mRender: function. So, how exactly I can add additional data column with button? — Sathvik
– Sathvik, Commented Jan 3, 2018 at 3:49

rjps12 · Accepted Answer · 2018-01-03 05:17:35Z

You just need to add additional data column to add additional column with button

 table1 = $('#myTable').DataTable({
    data: json,
    columns: [
      { className: "hide", data: 'TestId' },
      { data: 'TestKey' },
      { data: 'TestType' },
      { data: 'ClassName' },
      { data: 'SubjectName' },
      { data: 'NoOfQuestions' },
      { data: 'TotalQuestions' },
      { data: "TotalQuestions", render: function (data, type, row) {
          return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
        }
      },
      { data: "TotalQuestions", render: function (data, type, row) {
          return '<input id="btnViewConcepts" class="btn-link lnk" onclick="View(\'' + row.TestId + '\',\'' + row.TestKey + '\');" style="width:100px"  value="View Concept"/> | <a href="QuestionPaper.aspx?TestId=' + row.TestId + '&Mode=Offline" target="_blank" class="btn-link">View Question Paper</a>'
        }
      }
    ]
  });

@object reference: Thank You so much for your answer. This works perfect for me.

Collectives™ on Stack Overflow

How to add buttons in multiple columns jQuery DataTable?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related