Почему в jQuery Datatable не отображается значок livicon в столбце функции рендеринга? - PullRequest
Новая
       23

Почему в jQuery Datatable не отображается значок livicon в столбце функции рендеринга?

0 голосов
/ 30 декабря 2018

Мне нужна твоя помощь!У меня есть JQuery Datatable, который загружает данные через вызов ajax на страницу php.Вызов ajax работает правильно и данные загружаются.В таблице есть два других столбца (цель первая и последняя).В последнем столбце показан href со значком livicon.Этот href создается с помощью функции рендеринга, а не чтения значения столбца ID.Проблема в том, что в последнем столбце не отображается значок livicon.Также, если я попытаюсь использовать опции defaultContent вместо функции рендеринга.Это мой код: 

    var table1 = $('#tblList').DataTable({
    "ajax": {
        "url": "/admin/addressbook/data",
        "type": "POST",
        "dataSrc": ""
    },
    order: [[1, 'asc']],
    columns: [
        { data: null, sortable: false, className: 'details-control', defaultContent: '' },
        { data: 'id', name: 'id', visible: false },
        { data: 'name', name: 'name' },
        { data: 'mail', name: 'mail' },
        { data: null, sortable: false,
            render: function ( data, type, full, meta )
            {
               return "<a href='/admin/addressbook/show/" + full.id + "'> " +
                      "<i class='livicon' data-name='info' data-size='18' data-loop='true' data-c='#428BCA' data-hc='#428BCA' title='show'></i></a>";
            }
        }
    ],
    searching: false
});

Результат в формате html: 

<tbody>
    <tr role="row" class="odd">
        <td class=" details-control"></td>
        <td>MEM Informatica S.r.l.</td>
        <td>Nuoro</td>
        <td>lblock@gmail.com</td>
        <td>
            <a href="http://hotline.web/admin/addressbook/show/3">
                <i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view contact"></i></a></td></tr><tr role="row" class="even"><td class=" details-control"></td><td>Treutel Ltd</td><td>Krajcikfort</td><td>E-mail: reyna.mosciski@ankunding.com<br>PEC: dickens.lenny@miller.com</td><td><strong>Ufficio</strong> (251) 338-8876 x628<br><strong>Ufficio</strong> 732.404.1733<br><strong>Fax (Ab.)</strong> 518.944.2509<br><strong>Fax (Uff.)</strong> (395) 363-7253</td><td><a href="http://hotline.web/admin/addressbook/show/7"><i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view contact"></i>
            </a>
        </td>
    </tr>
</tbody>

Но значок не отображается в ячейке.Кто-нибудь может мне помочь?

1 Ответ

0 голосов
/ 31 декабря 2018

Спасибо за ваш ответ, Пьер.Это полный код HTML-страницы: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Address Book</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <meta name="csrf-token" content="VN6fZCZNPCRagLPCax48sQP4Wp0UQDdhqa0KcnCt">
    <!-- global css -->

    <link href="http://example.com/assets/css/app.css" rel="stylesheet" type="text/css"/>
    <!-- font Awesome -->

    <!-- end of global css -->
    <!--page level css-->
        <link rel="stylesheet" type="text/css" href="http://example.com/assets/vendors/datatables/css/dataTables.bootstrap.css" />
    <link href="http://example.com/assets/css/pages/tables.css" rel="stylesheet" type="text/css" />
            <!--end of page level css-->

</head>

<body class="skin-josh">
<header class="header">
    <a href="http://example.com/admin" class="logo">
        <img src="http://example.com/assets/img/logo.png" alt="logo">
    </a>
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <div>
            <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
                <div class="responsive_nav"></div>
            </a>
        </div>
        <div class="navbar-right">
            <ul class="nav navbar-nav">
                <li class="dropdown notifications-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="livicon" data-name="bell" data-loop="true" data-color="#e9573f"
                           data-hovercolor="#e9573f" data-size="28"></i>
                        <span class="label label-warning">7</span>
                    </a>
                </li>                
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="http://example.com/assets/images/authors/no_avatar.jpg" alt="img" height="35px" width="35px" class="img-circle img-responsive pull-left"/>
                        <div class="riot">
                            <div>
                                <p class="user_name_max">SA MEM</p>
                                <span>
                                    <i class="caret"></i>
                                </span>
                            </div>
                        </div>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- Menu Body -->
                        <li>
                            <a href="http://example.com/admin/users/1">
                                <i class="livicon" data-name="user" data-s="18"></i>
                                My Profile
                            </a>
                        </li>
                        <li role="presentation"></li>
                        <li>
                            <a href="http://example.com/admin/users/1/edit">
                                <i class="livicon" data-name="gears" data-s="18"></i>
                                Account Settings
                            </a>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-right">
                                <a href="http://example.com/admin/logout">
                                    <i class="livicon" data-name="sign-out" data-s="15"></i>
                                    Logout
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="wrapper ">
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side ">
        <section class="sidebar ">
            <div class="page-sidebar  sidebar-nav">
                <!-- BEGIN SIDEBAR MENU -->
                <ul id="menu" class="page-sidebar-menu">
                    <li>
                        <a href="http://example.com/admin">
                            <i class="livicon" data-name="dashboard" data-size="18" data-c="#418BCA" data-hc="#418BCA"
                               data-loop="true"></i>
                            <span class="title">Dashboard 1</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="http://example.com/admin/addressbook">
                            <i class="livicon" data-name="eye-open" data-size="18" data-c="#F89A14" data-hc="#F89A14" data-loop="true"></i>
                            Address Book
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </aside>

    <!-- Content -->
    <aside class="right-side">
        <section class="content-header">
            <h1>Address Book</h1>
            <ol class="breadcrumb">
                <li>
                    <a href="http://example.com/admin"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>Dashboard</a>
                </li>
                <li class="active">Elenco contatti</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content paddingleft_right15">
            <div class="row">
                <div class="panel panel-primary ">
                    <div class="panel-heading">
                        <h4 class="panel-title"> <i class="livicon" data-name="user" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>List</h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">  
                            <table class="table table-bordered width100" id="tblList">
                                <thead>
                                    <tr class="filters">
                                        <th></th>
                                        <th>id</th>
                                        <th>Nome</th>
                                        <th>E-mail/PEC</th>
                                        <th></th>
                                    </tr>
                                </thead>                                
                                <tbody>
                                    <tr role="row" class="odd">
                                        <td class=" details-control"></td>
                                        <td>Jack Miles</td>
                                        <td>London</td>
                                        <td>lblock@gmail.com</td>
                                        <td>
                                            <a href="http://example.com/admin/addressbook/show/3">
                                                <i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view contact"></i></a></td></tr><tr role="row" class="even"><td class=" details-control"></td><td>Treutel Ltd</td><td>Krajcikfort</td><td>E-mail: reyna.mosciski@ankunding.com<br>PEC: dickens.lenny@miller.com</td><td><strong>Ufficio</strong> (251) 338-8876 x628<br><strong>Ufficio</strong> 732.404.1733<br><strong>Fax (Ab.)</strong> 518.944.2509<br><strong>Fax (Uff.)</strong> (395) 363-7253</td><td><a href="http://example.com/admin/addressbook/show/7"><i class="livicon" data-name="info" data-size="18" data-loop="true" data-c="#428BCA" data-hc="#428BCA" title="view contact"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </aside>
</div>
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Return to top"
   data-toggle="tooltip" data-placement="left">
    <i class="livicon" data-name="plane-up" data-size="18" data-loop="true" data-c="#fff" data-hc="white"></i>
</a>
<script src="http://example.com/assets/js/app.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://example.com/assets/vendors/datatables/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="http://example.com/assets/vendors/datatables/js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="http://example.com/assets/js/pages/admin/addressbook.js" ></script>
</body>
</html>
...