如何通过 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();
     });
});