How to Make consistency on header and body cell border while using nowrap properties?

How to Make consistency on header and body cell border while using nowrap properties?

pritamthingpritamthing Posts: 4Questions: 1Answers: 0

Here I have attached the screenshut of the issue.
**Error messages shown*
*:
by default data table is wrapping the header content with white spaces.
I wanted it to make nowrap and when i do this , i encounter an error on inconsistent border of header and body content during load only. once you sort data , it is fine for me

Could anyone help me out on this issue?
Thanks,
PritamT

This question has an accepted answers - jump to answer

Answers

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

    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

  • pritamthingpritamthing Posts: 4Questions: 1Answers: 0
    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

  • pritamthingpritamthing Posts: 4Questions: 1Answers: 0

    {
    "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"
    ]
    

    }

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    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

  • pritamthingpritamthing Posts: 4Questions: 1Answers: 0

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

    Thanks @colin and @kthorngren

    Regards,
    Pritam

Sign In or Register to comment.