jquerydatatables

column name not displayed in datatables

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>

Solution

  • 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