默认选择一行并使用 jQuery DataTables 发送 XHR 请求

Posted 2023-03-14

【中文标题】默认选择一行并使用 jQuery DataTables 发送 XHR 请求

【英文标题】：Select a row by default and send XHR request with jQuery DataTables

【发布时间】：2020-04-15 05:53:37

【问题描述】：

我正在尝试选择我的表的第一行并根据所选行通过 ajax 发送请求。到目前为止，我只能选择我的第一行，但仍然无法发送请求。

逻辑

代码

var row = $(this).closest('tr');
var table = $("#projects_table").DataTable(
    'createdRow': function(row, data, dataIndex) 
        if (dataIndex == 0) 
            $(row).addClass('selected'); // selected row (first one)
        ;
        setTimeout( function () 
            table.draw();
        , 100 );
    
);

$('#projects_table tbody').on( 'click', 'tr', function (e) 
    $('.addVisit').hide();
    e.preventDefault();

    if ( $(this).hasClass('selected') ) 
        $(this).removeClass('selected');
        var scheduleID = '';
        var projectID = '';
        $('.projectName').empty();
        $('#projectName').empty();
     else 
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        $('.projectName').empty();
        $('#projectName').empty();

        var projectID = $(this).data('id'); //this should get data-id of selected row above

        $.ajax(
            type:'GET',
            url:'url('dashboard/getProjectVisits')/'+projectID, //this should be excuted
            success:function(data)
                // retunting my data in second table and this process repeats
                // for all my tables in this view.
                // (to clear the code i removed this part)
            
        );
    
);

有什么想法吗？

更新

这是我的表格 html 代码

<!-- projects table -->
<div class="col-md-6">
    <div class="panel">
        <div class="panel-heading">
            <h6 class="panel-title">Projects</h6>
        </div>
        <div class="panel-body">
            <table id="projects_table" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>Project</th>
                </tr>
                </thead>
                <tbody id="projects_table2">
                @foreach($projects as $project)
                <tr data-id="$project->id">
                    <td>$project->name</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- visits table -->
<div class="col-md-6">
    <div class="panel">
        <div class="panel-heading">
            <h6 class="panel-title"><span class="projectName"></span> Visits</h6>
        </div>
        <div class="panel-body">
            <table id="schedule_table" class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>From Date</th>
                    <th>To Date</th>
                    <th>Location</th>
                    <th>Description</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody id="schedule_table2"></tbody>
            </table>
        </div>
    </div>
</div>

【问题讨论】：

您确定没有发送请求吗？你签入网络标签了吗？

@AmanDeep 是的..

所以你的意思是它进入 else 块，但不执行 ajax 代码。？

@AmanDeep 是的，我目前得到的只是我的第一个表，选择了第一行但第二个表中没有任何返回我仍然必须单击选定的行才能在第二个表中获取数据（我想避免点击和数据自动返回）

@AmanDeep 有什么想法吗？

【参考方案1】：

看来问题出在绑定点击事件处理程序后触发点击事件。

这是该问题的有效 CodeSandbox 复现：https://codesandbox.io/s/datatables-select-row-by-default-and-send-request-fnpu7

DataTables 现在在其配置中没有 createdRow 处理函数的情况下被实例化，我们在点击事件绑定后使用 jQuery 点击触发器：

var table = $("#projects_table").DataTable();

// ...

$("#projects_table tbody").on("click", "tr", function(e) 
  // ...
);

$("#projects_table tbody tr:first-child").trigger("click");

【讨论】：

谢谢，我会试试，让你知道它是否有效

不，它没有做任何事情仍然没有在页面加载时发送 id，和之前一样我仍然需要点击

@mafortis 我明白了，所以我刚刚更新了那个 Codesandbox。你能在那里看到我的编辑吗？我从 DataTables 实例化配置中删除了 createdRow 处理程序，并在附加单击事件处理程序后添加了 jQuery 单击触发器：$("#projects_table tbody tr:first-child").trigger("click");

谢谢，我会测试它并告诉你，同时让我问：为什么使用trigger("click")？我的数据现在通过点击返回我正在寻求的是在页面加载时没有任何点击的第一行数据。 PS 我还没有测试你的代码，但可能会像我希望的那样工作，我只是要求获得更多知识。

我已经测试了你的代码，如果它似乎也可以工作，我删除 if ( $(this).hasClass('selected') ) $(this).removeClass('selected'); else 部分否则将无法工作，我现在担心的是如果我从数据表中删除它会导致功能问题未来。你有什么建议？