Question

我有一个加载了Ajax数据的表（调用如下所示）：

 success: function (data) {
        var aRC = JSON.parse(data.d);
        var line = "";
        for (var i = 0; i < aRC.length; i++) {
            var id = aRC[i].Id;
            var num = id;
            var rev = aRC[i].field;

            lines += '<tr id="V' + num + '" data-id="' + num + '">';
            lines += '<td>' + num + '</td>';
            lines += '<td id="V' + num + '-1">' + rev + '</td>';
            lines += '<td class="text-center">';
            lines += '   <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="' + num + '"></span>';
            lines += '   <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="' + num + '"></span>';
            lines += ' </td>';
            lines += '</tr>';
        }
        $('#TableVS').html(lines);

这是Ajax调用后我的页面的样子：

当我点击编辑范围时，输入值流会自动填充行数据，当我点击删除范围时，DataTables会提示我弹出窗口以确认删除该行。我的问题源于我在点击编辑/删除范围时尝试加载行ID。

问题

数据已正确加载到我的DataTable中，但问题是当我点击跨度时，没有任何反应。我相信这是因为我没有为每一行分配ID，我想知道怎么做？

这是我从输入

加载数据的代码

function editarDatosVs(id) {
    if ($('#V' + id).length) {
        var id = $('#V' + id).attr('data-id');

        $('#IdVs').val(id);
        var rev = $('#V' + id + '-1').html();

        $('#vs').val(rev);

    }
    else {
        $('#IdVs').val('0');
        $('#vs').val('');
    }
}

Answer 1

给出一个具有类似结构的表：

<div class="container">
    <input type="text" id="id"/>
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="1"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="1"></span>                   
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Garrett Winters</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="2"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="2"></span>                   
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ashton Cox</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="3"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="3"></span>                   
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Cedric Kelly</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="4"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="4"></span>                   
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Airi Satou</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="5"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="5"></span>                   
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Brielle Williamson</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="6"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="6"></span>                   
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>Herrod Chandler</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="7"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="7"></span>                   
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>Rhona Davidson</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="8"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="8"></span>                   
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Colleen Hurst</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="9"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="9"></span>                   
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>Sonya Frost</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="10"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="10"></span>                   
                </td>
            </tr>
            <tr>
                <td>11</td>
                <td>Jena Gaines</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="11"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="11"></span>                   
                </td>
            </tr>
            <tr>
                <td>12</td>
                <td>Quinn Flynn</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="12"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="12"></span>                   
                </td>
            </tr>
            <tr>
                <td>13</td>
                <td>Charde Marshall</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="13"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="13"></span>                   
                </td>
            </tr>
            <tr>
                <td>14</td>
                <td>Haley Kennedy</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="14"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="14"></span>                   
                </td>
            </tr>
            <tr>
                <td>15</td>
                <td>Tatyana Fitzpatrick</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="15"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="15"></span>                   
                </td>
            </tr>
            <tr>
                <td>16</td>
                <td>Michael Silva</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="16"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="16"></span>                   
                </td>
            </tr>
            <tr>
                <td>17</td>
                <td>Paul Byrd</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="17"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="17"></span>                   
                </td>
            </tr>
            <tr>
                <td>18</td>
                <td>Gloria Little</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="18"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="18"></span>                   
                </td>
            </tr>
            <tr>
                <td>19</td>
                <td>Bradley Greer</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="19"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="19"></span>                   
                </td>
            </tr>
            <tr>
                <td>20</td>
                <td>Dai Rios</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="20"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="20"></span>                   
                </td>
            </tr>
            <tr>
                <td>21</td>
                <td>Jenette Caldwell</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="21"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="21"></span>                   
                </td>
            </tr>
            <tr>
                <td>22</td>
                <td>Yuri Berry</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="22"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="22"></span>                   
                </td>
            </tr>
            <tr>
                <td>23</td>
                <td>Caesar Vance</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="23"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="23"></span>                   
                </td>
            </tr>
            <tr>
                <td>24</td>
                <td>Doris Wilder</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="24"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="24"></span>                   
                </td>
            </tr>
            <tr>
                <td>25</td>
                <td>Angelica Ramos</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="25"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="25"></span>                   
                </td>
            </tr>
            <tr>
                <td>26</td>
                <td>Gavin Joyce</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="26"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="26"></span>                   
                </td>
            </tr>
            <tr>
                <td>27</td>
                <td>Jennifer Chang</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="27"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="27"></span>                   
                </td>
            </tr>
            <tr>
                <td>28</td>
                <td>Brenden Wagner</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="28"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="28"></span>                   
                </td>
            </tr>
            <tr>
                <td>29</td>
                <td>Fiona Green</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="29"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="29"></span>                   
                </td>
            </tr>
            <tr>
                <td>30</td>
                <td>Shou Itou</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="30"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="30"></span>                   
                </td>
            </tr>
            <tr>
                <td>31</td>
                <td>Michelle House</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="31"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="31"></span>                   
                </td>
            </tr>
            <tr>
                <td>32</td>
                <td>Suki Burks</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="32"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="32"></span>                   
                </td>
            </tr>
            <tr>
                <td>33</td>
                <td>Prescott Bartlett</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="33"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="33"></span>                   
                </td>
            </tr>
            <tr>
                <td>34</td>
                <td>Gavin Cortez</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="34"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="34"></span>                   
                </td>
            </tr>
            <tr>
                <td>35</td>
                <td>Martena Mccray</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="35"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="35"></span>                   
                </td>
            </tr>
            <tr>
                <td>36</td>
                <td>Unity Butler</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="36"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="36"></span>                   
                </td>
            </tr>
            <tr>
                <td>37</td>
                <td>Howard Hatfield</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="37"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="37"></span>                   
                </td>
            </tr>
            <tr>
                <td>38</td>
                <td>Hope Fuentes</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="38"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="38"></span>                   
                </td>
            </tr>
            <tr>
                <td>39</td>
                <td>Vivian Harrell</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="39"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="39"></span>                   
                </td>
            </tr>
            <tr>
                <td>40</td>
                <td>Timothy Mooney</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="40"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="40"></span>                   
                </td>
            </tr>
            <tr>
                <td>41</td>
                <td>Jackson Bradshaw</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="41"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="41"></span>                   
                </td>
            </tr>
            <tr>
                <td>42</td>
                <td>Olivia Liang</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="42"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="42"></span>                   
                </td>
            </tr>
            <tr>
                <td>43</td>
                <td>Bruno Nash</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="43"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="43"></span>                   
                </td>
            </tr>
            <tr>
                <td>44</td>
                <td>Sakura Yamamoto</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="44"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="44"></span>                   
                </td>
            </tr>
            <tr>
                <td>45</td>
                <td>Thor Walton</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="45"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="45"></span>                   
                </td>
            </tr>
            <tr>
                <td>46</td>
                <td>Finn Camacho</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="46"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="46"></span>                   
                </td>
            </tr>
            <tr>
                <td>47</td>
                <td>Serge Baldwin</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="47"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="47"></span>                   
                </td>
            </tr>
            <tr>
                <td>48</td>
                <td>Zenaida Frank</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="48"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="48"></span>                   
                </td>
            </tr>
            <tr>
                <td>49</td>
                <td>Zorita Serrano</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="49"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="49"></span>                   
                </td>
            </tr>
            <tr>
                <td>50</td>
                <td>Jennifer Acosta</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="50"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="50"></span>                   
                </td>
            </tr>
            <tr>
                <td>51</td>
                <td>Cara Stevens</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="51"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="51"></span>                   
                </td>
            </tr>
            <tr>
                <td>52</td>
                <td>Hermione Butler</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="52"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="52"></span>                   
                </td>
            </tr>
            <tr>
                <td>53</td>
                <td>Lael Greer</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="53"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="53"></span>                   
                </td>
            </tr>
            <tr>
                <td>54</td>
                <td>Jonas Alexander</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="54"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="54"></span>                   
                </td>
            </tr>
            <tr>
                <td>55</td>
                <td>Shad Decker</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="55"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="55"></span>                   
                </td>
            </tr>
            <tr>
                <td>56</td>
                <td>Michael Bruce</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="56"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="56"></span>                   
                </td>
            </tr>
            <tr>
                <td>57</td>
                <td>Donna Snider</td>
                <td>
                    <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="57"></span>
                    <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="57"></span>                   
                </td>
            </tr>
        </tbody>
    </table>
</div>

此代码似乎可以满足您的需求：

var table = $('#example').DataTable({
});

$('#example').on("click", ".glyphicon-remove", function(){
    $("#id").val($(this).data("id"));
});

如果我误解了你的要求，请说但是我认为这就是你之后的事情？工作JSFiddle。

Answer 2

将sClass索引添加到id列

var updateIndex = function(){
        $( this ).find('tr').each(function(){
            $( this ).find( "td.index" ).html( $(this).index()+1);
        });
    };

updateIndex.call(Table);//table is the datatable reference

在插入或删除行

后调用此方法

Answer 3

添加Rory所说的，在数据表设置中调用rowcallback中的函数并扩展此函数。然后将数据表设置回数据格式div。

如何在表格的每一行添加“Id”

3 个答案: