datatables-cn icon indicating copy to clipboard operation
datatables-cn copied to clipboard

html写出来的table和js更新后的效果不一样(数据一样)

Open weishengwen2 opened this issue 4 years ago • 1 comments

<table id="permission2" class="table table-bordered membersTable">
                                <thead></thead>

                                <tbody>
                                    <tr>
                                            <td>name</td>
                                            <td style="padding:2px;"><div class="check"><span><input type="checkbox" class="input_check" name="objectId[]" id="{{ item.value_view }}" value="{{ item.value_view }}" {{ item.value_view_checked }} onClick="onUserCheck()"><label for="{{ item.value_view }}" style="margin-bottom: 0px;"/></span></div></td>
                                    </tr>
                                </tbody>
                            </table>
$('#permission1').DataTable({
                                "language": dataTablesLanguage,
                                serverSide: true,
                                stateSave: false,
                                stateDuration: 0,
                                "filter": false,
                                'paging':false,
                                'info':false,
                                'infoEmpty':false,
                                'zeroRecords':false,
                                "sortable": false,
                                ordering: false,
                                ajax: {
                                    type:"GET",
                                    url:"{{ urlFor('group.permissions')}}".replace(":id", data.node.id),
                                    dataType : "json",
                                    "data": function (d) {
                                        $.extend(d, {num:1});
                                        $.extend(d, {editGroupId:$('#editUserGroupId').val()});
                                    }
                                },
                                "columns": [
                                   {"data": "name"},
                                   {
                                       "data": "value_view",
                                       "sortable": false,
                                       "render": function (data, type, full, meta) {
                                           //console.log("data = " + JSON.stringify(full));
                                           var isCheck = full['value_view_checked'];
                                           $("#42_view").click(function () {
                                               needshowsplicing();
                                           });
                                           return '<div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div>';
                                           //console.log("u = " + '<thead></thead><tbody><tr><td>'+name+'</td><td style="padding:2px;height:22px"><div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div></td></tr></tbody>');
                                           //return '<td style="padding:2px;"><div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div></td>';
                                       }
                                   }
                                ]
                            });

weishengwen2 avatar Sep 01 '20 09:09 weishengwen2

@weishengwen2 这里需要注意到,DT采用的是缓存数据,当获取到数据后,DT会缓存到内部变量里,如果有不同的类型(正交数据),会分别存到不同的内部变量,比如排序,搜索等。 所以如果你要做更新表格数据的操作,你需要使用DT提供的api来操作,这样数据才能保持一致,因为通过jQuery更新表格数据,他只是更新了html,而DT的内部数据没有更新,所以再去获取的时候就会出现数据不一致。 如何更新DT的数据,参考:

  • http://datatables.club/reference/api/data()
  • http://datatables.club/reference/api/cell().data()
  • http://datatables.club/reference/api/column().data()
  • http://datatables.club/reference/api/row().data()

ssy341 avatar Sep 03 '20 08:09 ssy341