Question: column name not displayed in datatables

Question

column name not displayed in datatables

Answers 1
Added at 2016-12-27 00:12
Tags
Question

The following code is now showing the column names in data table when "columns" filed of datatables is set to "colArray", but it shows when it is set to "colname1". Can somebody help what I am missing here?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

</head>

<body>
  <script>
    var dataSet = [
        ["Tiger", "10", "20", "51", "3", "2", "1"],
        ["Hyena","10","20","51","3","2 ","1 "]];


       var  colname1= [
                { title: "Column0 " },
                { title: "column1 " },
                { title: "column2 " },
                { title: "column3 " },
                { title: "column4 "}];

        colArray = new Array();
        colArray.push({Values : " Name "});
        $.each(colname1, function(index, value){
            colArray.push({Values : colname1[index].Values});
        });
        colArray.push({Values : "lastcol"});

       $(document).ready(function() {

            var t = $('#example').DataTable({
                data: dataSet,
                columns:colArray
              //columns: colname1
            });


      });
  </script>

  <div>
    <table width="300" class="display" id="example"></table>
  </div>


</body>

</html>

Answers to

column name not displayed in datatables

nr: #1 dodano: 2016-12-27 00:12

The columns should be this way:

columns: [
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" }
]

But you have given Values. See this snippet:

var dataSet = [
  ["Tiger", "10", "20", "51", "3", "2", "1"],
  ["Hyena", "10", "20", "51", "3", "2 ", "1 "]
];
var colname1 = [{
  title: "Column0"
}, {
  title: "column1"
}, {
  title: "column2"
}, {
  title: "column3"
}, {
  title: "column4"
}];

colArray = [];
colArray.push({
  title: "Name"
});
$.each(colname1, function(index, value) {
  colArray.push({
    title: value.title
  });
});
colArray.push({
  title: "lastcol"
});

$(document).ready(function() {
  var t = $('#example').DataTable({
    data: dataSet,
    columns: colArray
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<div>
  <table width="300" class="display" id="example">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

Preview

preview

Source Show
◀ Wstecz