如何通过 URL 将变量传递给数据表搜索字段？

Question

我目前正在做一个 laravel 5.4 项目，在这个项目中我已经使用 DataTables jQuery Plugin 成功地实现了一个数据表。此数据表（#sample_1）默认包含一个搜索字段，可以正常工作并根据搜索过滤记录。

数据表位于 /home/loan 我想知道是否有任何方法可以通过将搜索字符串传递到数据表的搜索字段来加载上面的页面和过滤后的记录列表。例如：/home/loan?search=bella

检查 chrome 中的数据表 html 代码后，我发现数据表搜索有

<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder="" aria-controls="sample_1">
</label>

我相信这是包含在数据表插件中的。我找不到将 name/id 分配给它的方法，因此我可以尝试 /home/loan?search=bella 我认为如果可行，那将是最简单的方法。但这里是 javascript

var initTable1 = function () {

    var table = $('#sample_1');

    // begin first table
    table.dataTable({

        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _END_ out of _TOTAL_ loans",
            "infoEmpty": "No loans found",
            "infoFiltered": "(filtered1 from _MAX_ total loans)",
            "lengthMenu": "Show _MENU_",
            "search": "Search:",
            "zeroRecords": "No matching loans found",
            "paginate": {
                "previous":"Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            }
        },


        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

        "lengthMenu": [
            [11, 20, 30, -1],
            [11, 20, 30, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 11,            
        "pagingType": "bootstrap_full_number",
        "columnDefs": [
            {  // set default column settings
                'orderable': true,
                'targets': [0]
            }, 
            {
                "searchable": false,
                "targets": [0]
            },
            {
                "className": "dt-right", 
                //"targets": [2]
            }
        ],
        "order": [
            [1, "asc"]
        ] // set first column as a default sort by asc
    });

请帮我解决这个问题

Answer 1

获取url参数后需要使用initComplete重新绘制table。

function getParam()
    {
        return window.location.href.slice(window.location.href.indexOf('?') + 1).split('=')[1];
    }

var table = $('#sample_1');

// begin first table
table.dataTable({

    // Internationalisation. For more info refer to http://datatables.net/manual/i18n
    "language": {
        "aria": {
            "sortAscending": ": activate to sort column ascending",
            "sortDescending": ": activate to sort column descending"
        },
        "emptyTable": "No data available in table",
        "info": "Showing _END_ out of _TOTAL_ loans",
        "infoEmpty": "No loans found",
        "infoFiltered": "(filtered1 from _MAX_ total loans)",
        "lengthMenu": "Show _MENU_",
        "search": "Search:",
        "zeroRecords": "No matching loans found",
        "paginate": {
            "previous":"Prev",
            "next": "Next",
            "last": "Last",
            "first": "First"
        }
    },


    "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

    "lengthMenu": [
        [11, 20, 30, -1],
        [11, 20, 30, "All"] // change per page values here
    ],
    // set the initial value
    "pageLength": 11,            
    "pagingType": "bootstrap_full_number",
    "columnDefs": [
        {  // set default column settings
            'orderable': true,
            'targets': [0]
        }, 
        {
            "searchable": false,
            "targets": [0]
        },
        {
            "className": "dt-right", 
            //"targets": [2]
        }
    ],
    "order": [
        [1, "asc"]
    ], // set first column as a default sort by asc

    "initComplete": function () {
        this.api().search(getParam()).draw();
     });
});

如何通过 URL 将变量传递给数据表搜索字段？

How to pass variable to datatable search field via URL?

javascript

datatable

jquery

datatables

laravel-5.4