Как открыть ссылки в Jatuables на стороне сервера jQuery через jQuery ColorBox? - PullRequest
Новая
       35

Как открыть ссылки в Jatuables на стороне сервера jQuery через jQuery ColorBox?

1 голос
/ 03 марта 2012

Поэтому в основном я использую серверную функциональность jQuery Datatables с PHP для извлечения таблицы с подробностями из MySQL, как показано здесь

Со стороны HTML следующий скрипт jQuery (1) ссылается на скрипт PHP, который получает данные из MySQL, а (2) затем определяет таблицу и настраивает столбцы в деталях строки.

Моя проблема заключается в получении ссылок в деталях строки для совместной работы с ColorBox.

Вот скрипт, который я использую: 

 <script type="text/javascript" charset="utf-8">

        $(document).ready(function() {
            memTable = $('#members').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "detailsm.php",
                "aoColumns": [
                    { "sClass": "center", "bSortable": false },
                    null,
                    null,
                    null,
                    { "sClass": "center" },
                    { "sClass": "center" },
                    { "sClass": "center" },
                { "sClass": "center" },

                    { "sClass": "center" }
                ],
                "aaSorting": [[1, 'desc']]
            } );

            $('#members tbody td img').live( 'click', function () {
                var memTr = $(this).parents('tr')[0];
                if ( memTable.fnIsOpen(memTr) )
                {
                    /* This row is already open - close it */
                    this.src = "datatables/details_open.png";
                    memTable.fnClose( memTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "datatables/details_close.png";
                    memTable.fnOpen( memTr, fnFormatMemberDetails(memTr), 'details' );
                }
            } );
        } );

        var memTable;

        /* Formating function for row details */
        function fnFormatMemberDetails ( memTr )
        {

            var mData = memTable.fnGetData( memTr );
            var smOut = '<table cellpadding="2" cellspacing="0" border="0" style="padding-left:20px;">';
            smOut += '<tr><td><b>Member Functions:</b></td><td></td><td><b>Details:</b></td><td></td></tr>';
            smOut += '<tr><td><a class="iframesmall" href="changecontact.php?userid='+mData[1]+'&fn=chusr">Update Info</a></td><td><a class="iframe"  href="notifymember.php?memberid='+mData[1]+'">Notify</a></td>'
            +'<td>Full Name: '+mData[14]+' '+mData[3]+'</td><td>Category: '+mData[11]+' | Created by: '+mData[12]+'</td></tr>';
            smOut += '<tr><td><a class="iframe" href="renewmember.php?memberid='+mData[1]+'">Renew Subscription</a></td><td><a class="iframe" href="rp.php?memberid='+mData[1]+'">Reset Password</a></td>                                   <td>Address: '+mData[15]+', '+mData[16] +', '+mData[17]+'</td><td>Mobile: '+mData[18]+'</td></tr>';
            smOut += '<tr><td><a class="iframe" href="disactivatemember.php?memberid='+mData[1]+'">Disactivate</a></td><td><a class="iframe" href="deletemember.php?memberid='+mData[1]+'">Delete</a></td>                  <td>Last Login: '+mData[10]+ '</td><td>Last Updated: '+mData[13]+'</td></tr>';
            smOut += '</table>';
            return smOut;
        }

    </script>

Мой jquery-скрипт ColorBox определяет класс iframesmall, на который есть ссылка в функции fnFormatMemberDetails , которая форматирует подробности строки для таблицы данных jquery.

Вот часть кода из fnFormatMemberDetails , которая форматирует подробности моей строки, как показано выше: 

smOut += '<tr><td><a class="iframesmall" href="changecontact.php?userid='+mData[1]+'&fn=chusr">Update Info</a></td><td><a class="iframesmall"  href="notifymember.php?memberid='+mData[1]+'">Notify</a></td>'
            +'<td>Full Name: '+mData[14]+' '+mData[3]+'</td><td>Category: '+mData[11]+' | Created by: '+mData[12]+'</td></tr>';

А вот мой скрипт jQuery ColorBox, который работает на той же странице при вызове через обычный HTML (но не через вывод HTML через jQuery / javascript): 

<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".photogall").colorbox({rel:'photogall'});
$(".photothumbs").colorbox({rel:'photothumbs'});
$(".iframesmall").colorbox({iframe:true, width:"800px", height:"80%"});


});
</script>

Подводя итог: Как заставить ColorBox работать с HTML-ссылками, которые генерируются с помощью jQuery / javascript? Все предложения приветствуются. Спасибо.

Ответы [ 2 ]

2 голосов
/ 04 марта 2012

Просто повторно примените colorbox () после добавления элементов dinamicallhy 

            else
            {
                /* Open this row */
                this.src = "datatables/details_close.png";
                //here you add the data
                memTable.fnOpen( memTr, fnFormatMemberDetails(memTr), 'details' );
                //here you should add colorbox for the newly added elements
                $(".iframesmall").colorbox({iframe:true, width:"800px", height:"80%"});
            }
0 голосов
/ 04 марта 2012

Как заставить ColorBox работать с HTML-ссылками, сгенерированными с помощью jQuery / javascript?

Назначить или переназначить colorbox после создания этих ссылок.

...