$.view()的使用和使用find()取datatable的一行的行序号的差别

本文探讨了在复杂的表格结构中如何准确获取行序号,特别是在处理不同数据集合时遇到的挑战。通过对比$.view()方法和jQuery的index()方法,详细解释了正确获取整个表格级别行序号的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<table id="checkLossItem" class="table table-hover searchtable">
                        <thead>
                            <th>选择</th>
                            <th>损失项</th>
                            <th>损失内容</th>
                            <th>联系方式</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            {^{for prpLscheduleItemsDetailVoList}}
                                <tr>
                                    <td>
                                        <input type="checkbox" class="switchbox check" name="itemsCheck" checked="checked"/>
                                    </td>
                                    <td>
                                        <input list="lossTypeold" class = "itemName" data-link="itemName" required="required" readonly="readonly">
                                        <datalist id="lossTypeold">
                                            <option>主车</option>
                                            <option>三者车</option>
                                            <option>物损</option>
                                            <option>人伤</option>
                                            <option>盗抢</option>
                                            <option>其它</option>
                                        </datalist>
                                    </td>
                                    <td>
                                        <input type="text" name="" data-link="itemContent" readonly="readonly" required="required">
                                    </td>
                                    <td>
                                        <input type="text" name="" data-link="phone" readonly="readonly" required="required">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-inner switchbtn" >
                                            正常调度
                                        </button>
                                    </td>                           
                                </tr> 
                            {{/for}}
                            {^{for prpLscheduleItemsDetailAddVoList}}
                                <tr>
                                    <td>
                                        <input type="checkbox"  class="switchbox check" name="itemsCheck" checked="checked"  disabled="disabled" />
                                    </td>
                                    <td>
                                        <input list="lossTypenew" class = "itemName" data-link="itemName" required="required">
                                        <datalist id="lossTypenew">
                                            <option>主车</option>
                                            <option>三者车</option>
                                            <option>物损</option>
                                            <option>人伤</option>
                                            <option>盗抢</option>
                                            <option>其它</option>
                                        </datalist>
                                    </td>
                                    <td>
                                        <input type="text" name="" data-link="itemContent" required="required">
                                    </td>
                                    <td>
                                        <input type="text" name="" data-link="phone" required="required">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-inner btn-removethis">
                                            <i class="fa fa-trash-o fa-lg"></i>
                                        </button>
                                    </td>                  
                                </tr> 
                            {{/for}}
                        </tbody>
                    </table>

在开发前台的时候遇到了一个问题,点击某行的时候我需要取到这行是的行序号index。想到可以使用$.view()取到当前行
var index = $.view(checkarray[i]).getIndex();

然而,事情没有那么简单,发现使用这种方式取到永远是prpLscheduleItemsDetailVoList的序号,prpLscheduleItemsDetailAddVoList的序号并没有取到。所以总结了一下,$.view()是当前集合下面的一行,而不是整个表格级别的。然后研究了一下整个表格下面的行序号怎么取
var index = $("#checkLossItem").find("tr").index($(checkarray[i]).parent().parent())-1;
这种方式取到的序号是需要减1,它是从1开始的。
### 使用 `dataTable` `jQuery.extend` 参数 当使用 `dataTable` 插件初始化表格并配置 AJAX 数据源时,可以通过 `$.extend()` 方法来扩展默认参数。这允许动态修改发送到服务器的数据请求。 #### 初始化 DataTable 并传递额外参数 通过 `$.extend()` 可以将原始数据与新的自定义参数合并: ```javascript var original = {}; // 原始参数对象 var param = { customParam: "value" }; // 合并两个对象并将结果作为 ajax 请求的一部分 dataTables.settings()[0].ajax.data = $.extend(original, param)[^1]; ``` 这段代码展示了如何利用 `$.extend()` 来组合不同的参数集,并将其赋值给 `dataTable` 实例中的 `ajax.data` 属性。这样可以确保每次发起 AJAX 调用时都携带更新后的参数集合。 对于回调函数,在处理返回的数据之前可能需要转换 jQuery 对象为 API 对象以便访问更多方法: ```javascript callback(returnData).api();[^2] ``` 此操作使得可以在标准的 jQuery 链式调用基础上进一步执行特定于 DataTable 的命令。 #### 完整示例:带有 AJAX 源参数扩展的 DataTable 初始化 下面是一个完整的例子,它不仅设置了基本选项还包含了对远程 URL 进行 GET 请求的功能以及如何向该请求附加额外查询字符串的能力。 ```javascript function initTable(urlRewrite) { var defaultParams = {}; $('#resourceTable').DataTable({ scrollY: 530, filter: true, dom: "<'box-content'<span6>f><span6>l>r<'span12 span12-pag'>p>", language: { search: "资源名称/URL:", }, ajax: { url: urlRewrite === undefined ? "/shore/admin/role/listResource.ajax?projectId=0&T=" : urlRewrite, dataSrc: "", data: function (d) { return $.extend(d, defaultParams); } } }); } ``` 在这个实例里,`initTable` 函数接受一个可选的重写 URL 地址用于指定 AJAX 请求的目标位置;而内部则通过匿名函数的形式实现了对 `data` 键值的操作——即每当准备发出一个新的 AJAX 请求前都会自动应用 `defaultParams` 中的内容至即将提交的数据包内[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值