首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >JS DataTables ServerSide True Breaks功能

JS DataTables ServerSide True Breaks功能
EN

Stack Overflow用户
提问于 2018-08-28 10:49:02
回答 1查看 36关注 0票数 0

嗨,我想展示一个加载轮子,它向用户显示数据正在加载中,并等待。为了做到这一点,我不得不使用serverSide: True,然后我发现这破坏了表功能。

表格将不再每页只显示10个条目,它将显示所有条目,底部的数字告诉您有多少条目将仅显示0。一旦加载了数据,这一切都会发生。

下面是DataTable的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var visitorTable = $('#visitorTable').on('error.dt', flashToasts).DataTable({
        serverSide: true,
        order: [[ 3, "desc" ]],
        processing: true,
        language: {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="margin-top: 100px"></i><span class="sr-only">Loading...</span> '
        },
        scrollX: true,
        ajax: {
            url: site.uri.public + '/api/list/visitors_basic_details/' + start + '/' + end,
            dataSrc: function(json) {
                $('#list_title').html(json.length + ' Visitors for the selected date range');
                identities = json;
                return json;
            }
        },
        columns: [
            {data: 'avatar_url',
                "orderable": false,
                render: function(data, type, full, meta) {
                    if(data != '') {
                        image = '<img src="' + data + '" alt="Profile Picture">';
                    } else {
                        if(full.gender == 1)
                            image = '<img src="' + site.uri.public + '/images/female-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                        else if(full.gender == 0)
                            image = '<img src="' + site.uri.public + '/images/male-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                        else
                            image = '<img src="' + site.uri.public + '/images/mixed-avatar.png" alt="Profile Picture" height="50px" width="50px">';
                    }

                    return image;
                }
            },
            {data: 'first_name',
                render: function(data, type, full, meta) {
                    if (full.gender != null) {
                        if(full.gender == 0) {
                            gender = 'Male';
                        } else {
                            gender = 'Female';
                        }
                    } else {
                        gender = '';
                    }

                    if (full.birth_date != null) {
                        age = Math.round(((new Date()).getTime()/1000 - full.birth_date) / (60 * 60 * 24 * 365));
                    } else {
                        age = '';
                    }

                    return '<font color="#E15910">' + data + ' ' + full.last_name + '</font>' + '<br>' + gender + ' ' + age;
                    // return (new Date()).getTime();
                }
            },
            {data: 'email_address'},
            {data: 'last_seen',
                render: function(data, type, full, meta) {
                    if (data != null) {
                        last_seen = moment.unix(data).format("DD/MM/YYYY HH:mm");
                    } else {
                        last_seen = '';
                    }

                    // Hide the timestamp so you are able to sort the column correctly
                    return last_seen;
                }
            },
            {data: 'provider',
                render: function(data, type, full, meta) {
                    if (data == '') {
                        return 'Registration Form';
                    } else {
                        return capitalizeFirstLetter(data);
                    }
                }
            },
            {data: 'marketing_consent',
                render: function(data, type, full, meta) {
                    if (data == 1) {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                }
            }
        ]
    });

下面是底部显示0的总数的示例:

示例

它应该是这样的:

正确的例子

当我删除serverSide: True时,一切都可以正常工作,但是加载轮不会显示。

EN

回答 1

Stack Overflow用户

发布于 2018-08-28 11:15:21

请在Ajax调用中尝试如下所示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
url: site.uri.public + '/api/list/visitors_basic_details?draw=1&start=' + start + '&length=' + end,

在服务器端,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public JsonResult visitors_basic_details(string draw, int start, int length)
{

}

注意:上面是一个MVC.Net服务器端的示例,“draw”需要被类型转换为整数。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52056051

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文