Question

我正在尝试使用DataTables创建一个JSON交付的表，并且当该表中的某些链接被点击时，该表会执行“事情”。链接并不总是存在，因此需要动态生成它们。我刚刚开始使用jQuery，而且我无法弄清楚我称之为“附加”到正确元素的回调。

这是一个示例HTML页面，带有动态生成的“up”链接（在普通的旧JS中相当天真）。想法是点击该链接将是例如生成一个警报，显示您单击的行和上面的行。最终目标是能够使用链接/按钮向上或向下移动行。

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <title>Show a re-orderable list</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" />
                <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        </head>
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"> </script>
    <script type="text/javascript" class="init">
        $(document).ready(function() {
            var table = $('#example').DataTable( {
                "ajax": "foo_data.txt",
                       "columnDefs": [
                        {
                            "render": function ( data, type, row ) {
                                var extra_text = "";
                                if( data === "Queued" ) {
                                    extra_text = ' <a href="#" class="up_queue">Up</a> Down ';
                                }
                                return data +' ('+ row[3]+')' + extra_text;
                            },
                            "targets": 1
                        },
                        { "visible": false,  "targets": [ 3 ] }
                        ]
            } );
            $(".up_queue").on('click', function() {
                var mydata = table.row( this ).data();
                var uprow  = table.row( this ).index() - 1;
                var updata = table.row( uprow) .data();
                alert( 'You clicked on '+mydata[0]+ ' ' +updata[0] +' row' );
                });
        } );
    </script>
<body>

<div>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Job ID</th>
                <th>Status</th>
                <th>Name</th>
                <th>Elapsed Time</th>
                <th>Options</th>
            </tr>
        </thead>
    </table>
</div>

</body>
</html>

基本上问题是“向上”链接什么都不做......我想知道点击了哪一行，以及紧接在clickee上方的行的索引。有什么想法吗？

这是关联数据foo_data.txt，可以通过AJAX提供：

{
"data":
[["101","Finished","Static","3 days",""],
 ["102","Queued","Moveable1","--",""],
 ["103","Queued","Moveable2","--",""],
 ["104","Queued","Moveable3","--",""],
 ["105","Queued","Moveable4","--",""],
 ["106","Queued","Moveable5","--",""],
 ["107","Queued","Moveable6","--",""]]}

Answer 1

原因是链接不起作用是因为它在您附加事件处理程序时不存在。您需要使用委托事件处理程序。

$('#example').on('click', ".up_queue", function() {
   var mydata = table.row( this ).data();
   var uprow  = table.row( this ).index() - 1;
   var updata = table.row( uprow) .data();
   alert( 'You clicked on '+mydata[0]+ ' ' +updata[0] +' row' );
});

有关详细信息，请参阅jQuery DataTables – Why click event handler does not work。

另一方面，请考虑使用RowReorder扩展，通过行重新排序提供更好的功能。

Answer 2

@ Gyrocode.com发布了一个有用的链接 - 这是工作代码：

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <title>Show a re-orderable list</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" />
                <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        </head>
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"> </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"> </script>
    <script type="text/javascript" class="init">
        $(document).ready(function() {
            var table = $('#example').DataTable( {
                "ajax": "foo_data.txt",
         'columnDefs': [
         {
            'targets': 4,
            'searchable': false,
            'orderable': false,
            "render": function ( data, type, row ) {
                var extra_text = "";
                if( row[1] === "Queued" ) {
                    extra_text = ' <button type="button" class="button up-button">Up</button>'
                }
                return extra_text;
            },
         } ]
            } );
            $('#example').on('click', ".up-button", function() {
                var tr        = $(this.closest('tr'));
                var table     = $(this.closest('table'));
                var tr_above   = table.DataTable().row(tr).index() - 1;
                var data       = table.DataTable().row(tr).data();
                var data_above = table.DataTable().row(tr_above).data();

                alert( 'You clicked on ' + data[0] + ' swap with ' + data_above[0] );
                });
        } );

    </script>
<body>

<div>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Job ID</th>
                <th>Status</th>
                <th>Name</th>
                <th>Elapsed Time</th>
                <th>Options</th>
            </tr>
        </thead>
    </table>
</div>

</body>
</html>

使用jQuery在DataTables表中创建动态链接

2 个答案: