关于自定义数据 Table

Question

我有以下一些奇怪的要求：

1.Only 移动站点默认加载 5 条记录，并在后续页面中加载分页数据。

和

2.In 桌面视图默认加载 10 条记录，并在后续页面中加载分页数据。

移动网站的格式不是 "m."。那么有什么方法可以根据桌面和移动视图更改数据 table 并在其中加载数据。

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

Answer 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>

关于自定义数据 Table

About Customize Data Table

html

css

jquery

jquery-ui

datatables