js插件脚本不适用于数据表服务器端呈现

问题描述

我有一个从服务器端处理的dataTable内容。我正在使用轮播和弹出插件。

$(document).ready( function () {
var dt = $('#blotter-table').DataTable( {
    "processing": true,"serverSide": true,"draw": 1,"searching": false,"bInfo": false,"bLengthChange": false,"columnDefs": [ {
        "orderable": false,"className": 'select-checkBox',"targets":   0
    },{"className":"dt-center","targets":3}
     ],"select": {
        "style":    'multi',"selector": 'td:first-child'
    },"order": [[ 1,'asc' ]],"ajax": {
        url: "{{ url('dmf/blotter/tasks') }}",type: "post",data: function(d) {
            d.account = $('#account').val(),d.run_date_id = $('#run_date_id').val(),d.category = $('#category').val()
        }
    },error: function() {
    },fnRowCallback: function(nRow,aData,idisplayIndex,idisplayIndexFull) {

    },"initComplete": function(settings,json) {
    }
} );

$(".selectAll").on( "click",function(e) {
    if ($(this).is( ":checked" )) {
        dt.rows(  ).select();
    } else {
        dt.rows(  ).deselect(); 
    }
});
$('.product__imageslider').slick({
    autoplay: true,autoplaySpeed: 2000,dots: true,infinite: true,fade: true,cssEase: 'linear',accessibility: false
});

$('.seemore a,.product__image').popover({
    html: true,container: 'body',trigger: 'hover',delay: { "show": 500,"hide": 10000 },animation: true,content: function() {

        $('.seemore a,.product__image').not(this).popover('hide');

        $(".popover").on("mouseleave",function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
            $(_this).popover("hide")
            }
        },100);
        });
        return $(this).attr('data-pop-over');
    }
}).on("mouseleave",function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide")
        }
    },100);
});

$(document).on('mouseleave','.popover-content',function(){
    $('.seemore a,.product__image').popover('hide');
});

});

服务器端脚本：

if(!empty($sku_group)) {
        foreach ($sku_group as $list) {
            $source = $list[0];
            $new_row = [];

            $new_row[0] = '';
            $product_block = '<div class="product__block"><div class="product__imageslider">';
            $s_images_arr = explode(" | ",$source->s_image_url);
            foreach($s_images_arr as $s_img) {
                $product_block .= '<div><img class="product__image" src="'.$s_img.'" data-toggle="popover" data-pop-over=\'<img class="product__image" src="'.$s_img.'" alt="">\'></div>';
            }
            $product_block .= '</div><div class="product__title"><p>'.$source->product_sku.'</p><p>'.$source->product_name.'</p></div>';
            $product_block .= 
                '<div class="product__detail">                        
                    <p class="seemore"><a href="#" data-toggle="popover" data-pop-over=\'<div class="product__detail-popover">
                        <p>Brand - '.$source->s_brand.'</p>                            
                        <p>Category - '.$source->s_category.'</p>
                        </div>\' target="_blank">See More ...</a>
                    </p>
                </div></div>';
            $new_row[1] = $product_block;
            
            $new_row[2] = '<div>...</div>';

            $data[] = $new_row;
        }   
    }
    $recordsTotal = 1; // dummy for Now
    $recordsFiltered = 1; // dummy for Now
    $json_data = array(
            'draw' => intval($draw),"limit" => intval($limit),"start" => intval($start),'recordsTotal' => intval($recordsTotal),'recordsFiltered' => intval($recordsFiltered),'data' => $data
        );
    echo json_encode($json_data);

但是轮播和弹出窗口在启用服务器端时无法正常工作。它可以与通常的客户端处理一起使用。

我什至测试了脚本的顺序，将它们排除在$(document).ready().. 范围之外，但是仍然相同。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）