Why table headers and datacolumns alignment is mismatched.Why it was happening?

Why table headers and datacolumns alignment is mismatched.Why it was happening?

kalpanaAkalpanaA Posts: 3Questions: 1Answers: 0
edited November 2015 in Free community support

hi,
I have used serverside paging .
my table data alignment is not correct with table headers.
I want to know why this problem arised,Which property usage causes this issue.

Answers

  • kalpanaAkalpanaA Posts: 3Questions: 1Answers: 0

    Please Help me in solving this issue.

  • allanallan Posts: 63,161Questions: 1Answers: 10,406 Site admin

    Per the forum rules, please link to a test case showing the issue so we can help to solve the issue.

    Allan

  • kalpanaAkalpanaA Posts: 3Questions: 1Answers: 0

    if (oTable != undefined && oTable != null && redrawDatatable == false) {
    oTable.fnDestroy();
    oTable = null;
    }
    oTable = $('#dtMemberSearch').dataTable({
    dom:
    'T<"clear">lfrtip',
    "sDom": "<'row'<'col-md-6'T><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
    "bRetrieve": true,
    //"scrollX": true,
    //"sScrollY": "500",
    // "bScrollCollapse": true,
    "aaSorting": [],
    "bDestroy": true,
    "bServerSide": true,
    "bAutoWidth": true,
    "bSort": true,
    // "bFilter": false,
    "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
    //$('#dtMemberSearch_wrapper').find(".DTTT").first().remove();
    var text = oSettings.oLanguage.sInfo;
    var recCount = oSettings._iRecordsTotal;
    if (recCount != undefined) {
    if (recCount == 0) {
    $('#dtMemberSearch_wrapper').find('.clear').html("

    No record(s) found.

    ");
    }
    else {
    $('#dtMemberSearch_wrapper').find('.clear').html("

    " + recCount + " Record(s) found.

    ");
    }
    }

                    $("#divmsgtag").addClass('hide');
                    $("#dtMemberSearch_info").removeAttr('style');
                    return "Showing " + iStart + " to " + iEnd + " of " + recCount + " entrie(s)";
                },
                "fnServerData": function (sSource, aoData, fnCallback) {
                    var formData = $('#MemberSearch').serializeObject();
                    for (var key in formData) {
                        if (formData.hasOwnProperty(key)) {
                            aoData.push({
                                name: key,
                                value: formData[key]
                            });
                        }
                    }
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback,
                        "error": function (data) {
                        }
                    })
                },
                "sAjaxSource": settings.MemberSearchUrl,
                "sServerMethod": "POST",
                //"sPaginationType": "full_numbers",
                "oLanguage": {
                    "sProcessing": "<div class='col-md-12'>Processing<img src='/content/img/ajax-loader.gif' style='margin-left: 3px;' /></div>"
                },
                "sDom": 'T<"clear">lfrtip',
                "oTableTools": {
    
                },
                "oTableTools": {
                    "sSwfPath": "/Scripts/Custom/swf/copy_csv_xls_pdf.swf",
                    "aButtons": [
                            {
                                "sExtends": "text",
                                "sButtonText": 'Print',
                                "sButtonClass": "btn tablebtn hide",
                                "stextMessage": "Your custom message would go here.",
                                "fnComplete": function () {
                                    alert("Please press escape when done");
                                    window.print();
                                },
                                "fnClick": function (nButton, oConfig) {
                                    this.fnPrint(true, oConfig);
                                }
                            },
                            {
                                "sExtends": "pdf",
                                "sButtonText": 'Pdf',
                                "sButtonClass": "btn tablebtn hide",
    
                            },
                            {
                                "sExtends": "xls",
                                "sButtonClass": "btn tablebtn hide",
                            },
    
                    ],
                },
                "columnDefs": [
                         {
                             "targets": [0],
                             "searchable": false,
                             "bSortable": false
                         },
                         {
                             "targets": [1],
                             "searchable": false,
                             "bSortable": false
                         },
                         {
                             "targets": [13],
                             "searchable": false,
                             "bSortable": false
                         }, ],
                "aLengthMenu": [[20, 30, 50], [20, 30, 50]]
    
            });
            return oTable;
        }
    

    This is My Datatable.If a remove scrollx ,It's aligned properly,But scrolling needed as I Have 15 columns.For that i used css but it is giving scrollbar at div level .It'S NOT working for me.

This discussion has been closed.