Блог

Я работаю над фиксированными столбцами jQuery с данными внутри моего приложения Laravel , используя пакет, называемый yajra datatable , когда я обновляю страницу, иногда у меня несколько пустых столбцов внутри фиксированных столбцов, как показано ниже. (первые 4 столбца фиксированы). Это происходит только иногда, также внутри столбца won_translate я использовал select2 несколько опций для загрузки данных только для этого столбца.

вот мой код

 $('#list_won_report').on('processing.dt', function (e, settings, processing) {
    loader.css('display', processing ? 'block' : 'none');
}).DataTable({
        // processing:true,
        deferRender: true,
        serverSide: true,
        pageLength: 50,
        dom: 'lifrtip',
        scrollX: true,
        paging: true,
        // scrollCollapse: true,
        ajax: {
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: 'vehicle-datatable-serialize',
            type: "POST",
            data: {"data": formSz}
        },
        fnCreatedRow: function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData['vehicle_id']);
        },
        rowCallback: function (row, data, index) {
            if (data.fob == 0) {
                $(row).addClass('bg-light-blue');
            }
            if (data.vehicle_details_id == null) {
                $(row).addClass('bg-light-grey');
            }
        },
        fixedColumns: {
            leftColumns: 4,
            rightColumns: 0
        },
        columnDefs: [
            {
                targets: [8, 40],
                className: 'text-center'
            },
        ],
        columns:
            [//TODO:fix searchable cols
                {data: 'site', name: 'vehicles.site'},
                {data: 'lot_number', name: 'vehicles.lot_number'},
                {data: 'vehi_model', name: 'vehicles.model'},
                {data: 'chassis_id', name: 'vehicles.chassis_id'},
                {data: 'branch', name: 'vehicles.branch'},
                {data: 'auc_date', name: 'vehicles.auc_date'},
                {data: 'start_price', name: 'vehicles.start_price'},
                {data: 'score', name: 'vehicles.score'},
                {data: 'year', name: 'vehicles.year'},
                {data: 'vehi_grade', name: 'vehicles.grade'},
                {data: 'mileage', name: 'vehicles.mileage'},
                {data: 'transmission', name: 'vehicles.transmission'},
                {data: 'vehi_color', name: 'vehicles.color'},
                {data: 'fob', name: 'vehicles.fob'},
                {data: 'current_fob', name: 'vehicles.current_fob'},
                {data: 'tc', name: 'vehicles.tc'},
                {data: 'pr', name: 'vehicles.pr'},
                {data: 'fob_plus', name: 'vehicles.fob_plus'},
                {data: 'fob_minus', name: 'vehicles.fob_minus'},
                {data: 'commission', name: 'vehicles.commission'},
                {data: 'mb', name: 'vehicles.mb'},
                {data: 'mb_round', name: 'vehicles.mb_round'},
                {data: 'sold_price', name: 'vehicles.sold_price'},
                {data: 'sp_gap', name: 'vehicles.sp_gap'},
                {data: 'remark', name: 'vehicles.remark'},
                {data: 'listed_by', name: 'vehicles.listed_by'},
                {data: 'bidder', name: 'vehicles.bidder'},
                {data: 'status', name: 'vehicle_details.status'},
                {data: 'won_status_txt', name: 'vehicles.won_status'},
                {data: 'adding_list', name: 'vehicles.adding_list'},
                {
                    name: "vehicle_extras.ic_remarks",
                    mRender: function (data, group, full, meta) {

                        let vehicleId = '<input type="hidden" name="id" value="'   full['vehicle_id']   '">',
                            icRemarks = full['ic_remarks'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (icRemarks !== '' amp;amp; tempActive != 1)) {
                            return vehicleId   icRemarks
                        }
                        else {
                            return vehicleId  
                                '<input type="text" class="input-inline"  name="ic_remarks" value="'   icRemarks   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.bidder_adj",
                    mRender: function (data, group, full, meta) {
                        let bidderAdj = full['bidder_adj'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (bidderAdj !== '' amp;amp; tempActive != 1)) {
                            return bidderAdj;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="bidder_adj" value="'   bidderAdj   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.bidder_remarks",
                    mRender: function (data, group, full, meta) {
                        let bidderRemark = full['bidder_remarks'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (bidderRemark !== '' amp;amp; tempActive != 1)) {
                            return bidderRemark;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="bidder_remarks" value="'   bidderRemark   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.error_reason",
                    mRender: function (data, group, full, meta) {
                        let errorReason = full['error_reason'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (errorReason !== '' amp;amp; tempActive != 1)) {
                            return errorReason;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="error_reason" value="'   errorReason   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.saving",
                    mRender: function (data, group, full, meta) {
                        let saving = full['saving'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (saving !== '' amp;amp; tempActive != 1)) {
                            return saving;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="saving" value="'   saving   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.by_bidder",
                    mRender: function (data, group, full, meta) {
                        let byBidder = full['by_bidder'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (byBidder !== '' amp;amp; tempActive != 1)) {
                            return byBidder;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="by_bidder" value="'   byBidder   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.by_lister",
                    mRender: function (data, group, full, meta) {
                        let byLister = full['by_lister'],
                            tempActive = full['temp_active'];
                        if (!separatedReport.includes("won-analysis-edit") || (byLister !== '' amp;amp; tempActive != 1)) {
                            return byLister;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="by_lister" value="'   byLister   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.by_other",
                    mRender: function (data, group, full, meta) {
                        let byOther = full['by_other'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (byOther !== '' amp;amp; tempActive != 1)) {
                            return byOther;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="by_other" value="'   byOther   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.fob_control",
                    mRender: function (data, group, full, meta) {
                        let fobControl = full['fob_control'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (fobControl !== '' amp;amp; tempActive != 1)) {
                            return fobControl;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="fob_control" value="'   fobControl   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.omr_allocation",
                    mRender: function (data, group, full, meta) {
                        let omrAllocation = full['omr_allocation'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("won-analysis-edit") || (omrAllocation !== '' amp;amp; tempActive != 1)) {
                            return omrAllocation;
                        }
                        else {
                            return '<input type="text" class="input-inline"  name="omr_allocation" value="'   omrAllocation   '">';
                        }
                    }
                },
                {
                    name: "vehicle_extras.won_translate",
                    mRender: function (data, group, full, meta) {
                        var wonTranslateObj = full['won_translate'];

                        let select2Id = "select2"   full['vehicle_id'];
                        let wonTranslateArray = [];
                        let tempAct = full['temp_active'];
                        let vehicleId = '<input type="hidden" name="id" value="'   full['vehicle_id']   '">';
                        let wtDefaultArray = ["No Issues", "Oil Bleeding", "Oil Leakage", "Engine Oil Bleeding", "Engine Oil Leakage", "Engine Noise", "Body Vibration", "White Smoke", "Black Smoke",
                            "Underbody Corrosion", "Engine Room Rust", "Engine Room Rust Heavy", "Engine Room Corrosion", "Engine Room Corrosion Heavy", "Corrosion Hole", "AT Jadder", "AT shock",
                            "Meter Tampered", "Meter Replaced", "Starter Motor Noise", "Cell Motor Noise", "Radiator Coolant Water Leak", "Clutchless", "Smoother", "Power Steering Noise",
                            "Dashboard Crack", "AC not working", "Power Window Not Working", "Power Slide Door Not Working"];

                        $('#'   select2Id).select2({
                            data: dataSet
                        });

                        if (!separatedReport.includes("translate") || (wonTranslateObj !== '' amp;amp; tempAct != 1)) {
                            return wonTranslateObj;
                        }
                        else if (separatedReport.includes("translate")) {
                            if (wonTranslateObj.includes(',')) {
                                wonTranslateArray = wonTranslateObj.split(',');
                            }
                            else if (wtDefaultArray.includes(wonTranslateObj)) {
                                wonTranslateArray = wonTranslateObj;
                            }
                            else if (wonTranslateObj != '') {
                                return '<input type="text"  class="txtSoldPrice input-inline won_translate" name="won_translate" value="'   wonTranslateObj   '">';
                            }
                        }

                        let select2Element = '<select id="'   select2Id   '" class="input-inline wonTranslateList won_translate"  name="won_translate[]" multiple="multiple"></select>';

                        $('#'   select2Id).val(wonTranslateArray);

                        if (!separatedReport.includes("won-analysis-edit")) {
                            return vehicleId   select2Element;
                        } else {
                            return select2Element;
                        }
                    }

                },
                {
                    name: "vehicle_extras.sales_points",
                    mRender: function (data, group, full, meta) {
                        let vehicleId = '<input type="hidden" name="id" value="'   full['vehicle_id']   '">',
                            salesPoints = full['sales_points'],
                            tempActive = full['temp_active'];

                        if (!separatedReport.includes("sales-point-edit") || (salesPoints !== '' amp;amp; tempActive != 1)) {
                            return salesPoints;
                        }
                        else if (!separatedReport.includes("won-analysis-edit")) {
                            return vehicleId
                                  '<input type="text" class="input-inline"  name="sales_points" value="'   salesPoints   '">';
                        } else {
                            return '<input type="text" class="input-inline"  name="sales_points" value="'   salesPoints   '">';
                        }
                    }
                },
                {
                    searchable:false,
                    mRender: function (data, group, full, meta) {
                        if (full['vehicle_details_id'] !== null) {
                            return '<a class="text-success mr-2" target="_blank" href="/vehicle-images/'   full['vehicle_id']   '">'  
                                '<i class="nav-icon i-Landscape font-weight-bold"  data-toggle="tooltip" data-placement="top" title="View Images"></i>'  
                                '</a>';
                        } else {
                            return '<a class="text-light mr-2">'  
                                '<i class="nav-icon i-Landscape font-weight-bold"  data-toggle="tooltip" data-placement="top" title="View Images"></i>'  
                                '</a>';
                        }
                    }
                }
            ],
        "initComplete":

            function (settings, json) {
                var api = new $.fn.dataTable.Api(settings);
                api.columns(21).visible(false);
                api.columns(21).visible(true);
            }

        ,
        "drawCallback":

            function (settings) {
                var api = new $.fn.dataTable.Api(settings);
               
                var wonAnalysis = separatedReport.includes("won-analysis-edit") ? true : false;
                if (!wonAnalysis) {
                    api.columns([28, 29, 30, 31, 32, 33, 34, 35, 36, 37]).visible(wonAnalysis);
                }
                var translate = separatedReport.includes("translate") ? true : false;
                if (!translate) {
                    api.columns(38).visible(translate);
                }
                var salePoint = separatedReport.includes("sales-point-edit") ? true : false;
                if (!salePoint) {
                    api.columns(39).visible(salePoint);
                }
                var hideSP = separatedReport.includes("hide-sold-price") ? false : true;
                if (!hideSP) {
                    api.columns([21, 22]).visible(hideSP);
                }

                if(hideCols.indexOf(",") >= 0){
                    api.columns(hideCols.split(',').map(Number)).visible(false);
                }

                loader.fadeOut();

                $('.wonTranslateList').select2({
                    placeholder: 'Select options'
                });
                $('table#list_won_report tbody tr').css('height', '37px');

            }

    }
);