Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2021

  We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• pritamthing Posts: 4Questions: 1Answers: 0

  October 2021 edited October 2021

  I am trying to add header dynamically, everything goes well except attached screenshot issue.
  I am unable to provide test cases for now , however the script is attached below.

  <script type="text/javascript">
      $(document).ready(function(){
          loadDataFromDatabase();
      })
      function loadDataFromDatabase(){
          $.ajax({
        headers:{
           'X-CSRF-TOKEN':$("meta[name='csrf-token']").attr('content')
        },
      type:'POST',
      url:'/getRecords',
      data:{"data":"data for export","module":'search',"query":{"and":{"a.eq":["34","abc"]}}},
      success:function(data) {
        var tabelecColumns =[];
        var actualData =data["data"]
        $.each(actualData, function(k,v){
  
            var actionDataElement='<div class="actionElements">'+
                                      '<a href="{{route ("editpersonaldetails","uniqueId") }}" class="btn btn-primary a-btn-slide-text">'+
                                          '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>'+
                                          '<span><strong class="fa fa-eye"></strong></span>'+
                                      '</a>'+
                                      '<a  href="{{route ("editpersonaldetails","uniqueId") }}" class="btn btn-success a-btn-slide-text">'+
                                          '<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>'+
                                          '<span><strong class="fa fa-edit"></strong></span>'+
                                      '</a>'+
                                      '<a href="#" onclick="deleteAction('+v["id"]+')" class="btn btn-danger a-btn-slide-text">'+
                                          '<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>'+
                                          '<span><strong class="fa fa-trash" ></strong></span>'+
                                      '</a>'+
                                  '</div>';
                                  actionDataElement = actionDataElement.replaceAll("uniqueId",v["id"]);
  
            v["action"]=actionDataElement;
          })
        $.each(data['columns'],function(key,val){tabelecColumns[key]={"data":val,"title":data['tableColumns'][key]}});
        tabelecColumns[0]={"data":"action","title":"Action"}
        $('#dataTablePersonalDetail').DataTable({
              pageLength: 10,
              scrollX:true,
              destroy: true,
              data: actualData,
              columns:tabelecColumns,
              searching:true
          });
          $('#dataTablePersonalDetail').find("tbody").find("tr").find("td").css("white-space","nowrap");
          $('.dataTables_scrollHeadInner').find(".dataTable ").find("thead").find("th").css("white-space","nowrap");
          $('.dataTables_scrollHeadInner').css("background-color","#253544");
          $('.dataTables_scrollHeadInner').css("color","white");
      }
   });
  
      }
  </script>
  

  Response from backend is attached in next comment

  Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
• pritamthing Posts: 4Questions: 1Answers: 0

  October 2021

  {
  "data": [
  {
  "id": 60,
  "firstname": "Hem",
  "middlename": "Raj",
  "lastname": "Lama",
  "province": null,
  "localgovernment": null,
  "district": null,
  "wardno": null,
  "dob": "1995-12-10",
  "gender": "male",
  "isblacklisted": 0,
  "maritialstatus": "married",
  "emailaddress": "Hari@gmail.com",
  "phonenumber": "972424234",
  "citizenshipno": "354353",
  "citizenshipissuedDate": "2021-10-13",
  "citizenshipissuedDistrict": "Makawanpur",
  "image": null,
  "relationshipdetails": null,
  "isrelexists": 0,
  "created_at": "2021-10-23 05:09:01",
  "updated_at": "2021-10-23 07:01:12",
  "action": "

  "
  },
  {
  "id": 61,
  "firstname": "Hari",
  "middlename": "bahadur",
  "lastname": "Nepal",
  "province": "Bagmati",
  "localgovernment": "Dhadhing",
  "district": "Makawanpur",
  "wardno": "5",
  "dob": "1995-12-10",
  "gender": "male",
  "isblacklisted": 0,
  "maritialstatus": "married",
  "emailaddress": "Hari@gmail.com",
  "phonenumber": "972424234",
  "citizenshipno": "354353",
  "citizenshipissuedDate": "2021-10-13",
  "citizenshipissuedDistrict": "Makawanpur",
  "image": "C:\fakepath\Capture.PNG",
  "relationshipdetails": "[{\"fatherDetails\":{\"firstName\":\"Mahndra\",\"middleName\":\"Bahadur \",\"lastName\":\"Nepal\",\"occupation\":\"Farmer\"}},{\"grandFatherDetails\":{\"firstName\":\"Syam \",\"middleName\":\"Bdr\",\"lastName\":\"Nepal\",\"occupation\":\"Teacher\"}}]",
  "isrelexists": 1,
  "created_at": "2021-10-23 05:09:02",
  "updated_at": "2021-10-23 05:09:02",
  "action": "

  "
  },
  {
  "id": 62,
  "firstname": "Hari",
  "middlename": "bahadur",
  "lastname": "Nepal",
  "province": "Bagmati",
  "localgovernment": "Dhadhing",
  "district": "Makawanpur",
  "wardno": "5",
  "dob": "1995-12-10",
  "gender": "male",
  "isblacklisted": 0,
  "maritialstatus": "married",
  "emailaddress": "Hari@gmail.com",
  "phonenumber": "972424234",
  "citizenshipno": "354353",
  "citizenshipissuedDate": "2021-10-13",
  "citizenshipissuedDistrict": "Makawanpur",
  "image": "C:\fakepath\Capture.PNG",
  "relationshipdetails": "[{\"fatherDetails\":{\"firstName\":\"Mahndra\",\"middleName\":\"Bahadur \",\"lastName\":\"Nepal\",\"occupation\":\"Farmer\"}},{\"grandFatherDetails\":{\"firstName\":\"Syam \",\"middleName\":\"Bdr\",\"lastName\":\"Nepal\",\"occupation\":\"Teacher\"}}]",
  "isrelexists": 1,
  "created_at": "2021-10-23 05:09:03",
  "updated_at": "2021-10-23 05:09:03",
  "action": "

  "
  },
  {
  "id": 64,
  "firstname": "Hari",
  "middlename": "bahadur",
  "lastname": "Nepal",
  "province": "Bagmati",
  "localgovernment": "Dhadhing",
  "district": "Makawanpur",
  "wardno": "5",
  "dob": "1995-12-10",
  "gender": "male",
  "isblacklisted": 0,
  "maritialstatus": "married",
  "emailaddress": "Hari@gmail.com",
  "phonenumber": "972424234",
  "citizenshipno": "354353",
  "citizenshipissuedDate": "2021-10-13",
  "citizenshipissuedDistrict": "Makawanpur",
  "image": "C:\fakepath\Capture.PNG",
  "relationshipdetails": "[{\"fatherDetails\":{\"firstName\":\"Mahndra\",\"middleName\":\"Bahadur \",\"lastName\":\"Nepal\",\"occupation\":\"Farmer\"}},{\"grandFatherDetails\":{\"firstName\":\"Syam \",\"middleName\":\"Bdr\",\"lastName\":\"Nepal\",\"occupation\":\"Teacher\"}}]",
  "isrelexists": 1,
  "created_at": "2021-10-23 05:09:06",
  "updated_at": "2021-10-23 05:09:06",
  "action": "

  "
  }

  ],
  "columns": [
      "id",
      "firstname",
      "middlename",
      "lastname",
      "image",
      "district",
      "province",
      "localgovernment",
      "wardno",
      "dob",
      "gender",
      "isblacklisted",
      "maritialstatus",
      "emailaddress",
      "phonenumber",
      "citizenshipno",
      "citizenshipissuedDate",
      "citizenshipissuedDistrict"
  ],
  "tableColumns": [
      "S.N",
      "First Name",
      "Middle Name ",
      "Last Name",
      "Image",
      "District",
      "Province",
      "Local Government",
      "Ward No",
      "Date of Birth",
      "Gender",
      "BlackListed",
      "Martial Status",
      "Email Address",
      "Phone Number",
      "Citizenship Number",
      "Citizenship Issued Date",
      "Citizenship Issued District"
  ]
  

  }
• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  October 2021 edited October 2021 Answer ✓

  Since you are updating the header styles after Datatables is initialized you will need to tell Datatables to recalculate the column widths. Use columns.adjust() after line 49. If this doesn't help then we will need to see an example so we can see what is happening.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• pritamthing Posts: 4Questions: 1Answers: 0

  October 2021

  What a turn around, Issue has been resolved with (https://datatables.net/reference/api/columns.adjust()) API

  Thanks @colin and @kthorngren

  Regards,
  Pritam