CODEWITHSUNDEEP
jquerydatatables
Sathvik
Sathvik

Reputation: 53

How to add buttons in multiple columns jQuery DataTable?

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

Upvotes: 0

Views: 5016

Answers (1)

rjps12
rjps12

Reputation: 605

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>'
        }
      }
    ]
  });

Upvotes: 2

Related Questions