首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >datatables.net与真实url中断的Laravel

datatables.net与真实url中断的Laravel
EN

Stack Overflow用户
提问于 2022-05-09 13:50:41
回答 1查看 117关注 0票数 0

我的场景中有一个laravel9站点,它使用datatables.net (v1.11.5),当我使用php服务时,这一切都很好。我现在正在努力让它与url (http://laravel.ecl使用主机和apache)一起服务,我可以登录我的站点,但是当我希望显示使用datatables.net脚本的用户表时,我在试图构建查询时会出错。

在查看所讨论的行时,我注意到当使用手工服务时,它是array(0 => array(0, "asc")),但是当我使用url时,我得到数组(0 => 0,1 => "asc"),因此我的代码错误Trying to access array offset on value of type int

这是我的刀片文件的相关部分:

代码语言:javascript
复制
    <div class="col-xs-12 col-sm-8 col-md-12 clearfix">
        <table id="users" class="eclipse table table-striped table-bordered table-hover">
            <thead>
                <td style="width:34px;">ID</td>
                <td style="width:16px;"> </td>
                <td style="width:220px;">Email</td>
                <td>Name</td>
                <td>Team</td>
                <td>Position</td>
                <td>Role</td>
                <td style="width:88px;">Last Edit</td>
                <td style="width:16px;">Actions</td>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        var loader = document.getElementById("loader");
        var menu   = document.getElementById("menu-holder");
        var span   = document.getElementsByClassName("close")[0];
        var modal  = document.getElementById("myModal");
        $(document).ready(function() {
            var table = $('#users').DataTable({
                "serverSide": true,
                "ajax": {
                    url: "/users/data/",
                    method: "get"
                },
                "columnDefs" : [
                    {
                        "targets": [-1],
                        "data": null,
                        "visible": true,
                        "defaultContent": '<button><i class="fas fa-bars"></i></button>'
                    },
                    {
                        "targets": [0],
                        "visible": false
                    }
                ],
            });
            $("#users tbody").on("click", "button", function () {
                var data = table.row( $(this).parents('tr') ).data();
                // Show popup form
                var url = $( this ).data("url");
                // now call ajax on this url
                call_ajax( "/user/" + data[0] + "/action" );
                modal.style.backgroundColor = null;
                modal.style.display = "block";
                menu.style.display = "block";
            });
            $("#add-new-user").on("click", function () {
                // Show popup form
                var url = $( this ).data("url");
                // now call ajax on this url
                call_ajax( url );
                modal.style.display = "block";
                loader.style.display = "block";
            })
            span.onclick = function() {
                loader.style.display = "none";
                modal.style.display = "none";
                menu.style.display = "none";
                modal.style.backgroundColor = '#fefefe';
            }
            window.onclick = function(event) {
                if (event.target == menu) {
                    loader.style.display = "none";
                    modal.style.display = "none";
                    menu.style.display = "none";
                    modal.style.backgroundColor = '#fefefe';
                }
            }
        });

        function call_ajax( url ) {
            $.get( url )
                .done(
                    function( data ) {
                        $("#content-region").html( data );
                    }
                )
                .fail(
                    function() {
                        $("#content-region").html( "<p>error</p>" );
                    }
                );
        }
    </script>

控制器中的功能:

代码语言:javascript
复制
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index( Request $request)
    {
        $search = $request->query('search', array('value' => '', 'regex' => false));
        $draw = $request->query('draw', 0);
        $start = $request->query('start', 0);
        $length = $request->query('length', 25);
        $order = $request->query('order', array(1, 'asc')); // << where the wrong values are rendered

        $filter = $search['value'];

        $sortColumns = array(
            0 => 'id',
            1 => 'profile_photo_path',
            2 => 'email',
            3 => 'name',
            4 => 'work_group',
            5 => 'position',
            6 => 'role',
            7 => 'created_at',
            8 => 'actions'
        );

        $query = User::select('users.*')->where('is_enabled', '=', 1);

        if (!empty($filter)) {
            $query->where('name', 'like', '%'.$filter.'%');
        }

        $recordsTotal = $query->count();

        $sortColumnName = $sortColumns[$order[0]['column']]; // << When the error happens

        $query->orderBy($sortColumnName, $order[0]['dir'])
            ->take($length)
            ->skip($start);

        $json = array(
            'draw' => $draw,
            'recordsTotal' => $recordsTotal,
            'recordsFiltered' => $recordsTotal,
            'data' => [],
        );

        $users = $query->get();

        foreach ($users as $user) {
            $json['data'][] = $user->getUserJson();
        }

        return $json;

    }

正如前面所解释的,使用php服务作品,这是我在开发之前一直使用的。然而,现在我计划使用一个正确的url进行进一步的测试,并有这个问题。所有不使用可数据功能的页面都服务正常,使用datatables.net的页面在$order = $request->query('order', array(1, 'asc'));上返回不正确的数据。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-09 14:13:23

感谢Lk77在这方面的帮助。解决了我的问题

代码语言:javascript
复制
            if ( !isset( $order[0]['column'] ) ) {
                unset( $order );
                $order = array( 0 => array( 'column' => 0, 'dir' =>"asc" ) );
            }

在此之后,它可以工作,一旦加载,就可以筛选所需的列。

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

https://stackoverflow.com/questions/72173083

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档