如何通过 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>

我相信这包含在数据表插件中。我找不到为其分配名称/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重绘表格。

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();
     });
});