关于自定义数据表答案

【问题标题】：About Customize Data Table关于自定义数据表
【发布时间】：2020-05-16 03:12:30
【问题描述】：

我有一些奇怪的要求：

1.移动网站默认只加载5条记录，后续页面加载分页数据。

和

2.在桌面视图中默认加载 10 条带有分页数据的记录以在后续页面中加载。

移动网站的格式不是“m.”。那么有没有办法根据桌面和移动视图更改数据表并在其中加载数据。

P.S：这是预定义的主题，所以我将无法使用引导程序。只有 HTML、JQuery 和 CSS 可以使用。

【问题讨论】：

标签： jquery html css jquery-ui datatables

【解决方案1】：

您需要在加载时检查屏幕的宽度，然后根据每页所需的行绘制数据表实例。

<script type="text/javascript">
    $(document).ready(function() {
        //initilise your datatable
        var myDtInstance=$('#datatable').DataTable( {
            "lengthMenu": [ 5,10, 20], //set required length menu
            "pageLength": 10 //set your default page length
        });
        windowSize = $(window).width(); //get your current window width
        //call function which will set the page length as per window size
        manipulateDataTableLen(5,10,myDtInstance);
        //this will called everytime window get resized
        $(window).resize(function(){
            manipulateDataTableLen(5,10,test);
        });
    });
    function manipulateDataTableLen(rowSize,defaultSize,dtInstance){
        windowSize = $(window).width();
        if(windowSize<=PUT_DESIRED_WINDOW_SIZE){
            dtInstance.page.len(rowSize).draw(false);
        }else{
            dtInstance.page.len(defaultSize).draw(false);
        }
    }
<script>

【讨论】：