Как использовать плагин jQuery dataTable? - PullRequest
Новая
       70

Как использовать плагин jQuery dataTable?

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

Моя проблема в том, что я не могу минимизировать "Recursos Humanos" и "Nominas", если я использую другой тип таблицы, например, отзывчивый, если вы минимизируете его.

введите описание изображения здесь

это с: datatable отзывчивым введите описание изображения здесь

хорошо, это мой код, где я использую cdn: 

<table id="employeeTable" class="display nowrap" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>


<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<link herf="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />


@section scripts{


<script src="https://code.jquery.com/jquery-1.12.4.js"></script> @**@
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>

<script>
        $(document).ready(function () {
            $('#employeeTable').DataTable({
                "scrollX": true,
                dom: 'Bfrtip',
                buttons: [ {
                    extend: 'excel',
                    title: 'ALIMENTOS DE CORTES:' + 'Planilla Produccion' ,
                    filename: 'PLANILLA PRODUCCION',
                    text: '<i class="fa fa-file-excel-o"></i> Excel'
                }]
            });
        });
</script>
}

1 Ответ

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

Загрузка требуемых зависимостей из Datatables.net, таких как js-файлы и css-файлы.

Или

Используйте ссылки CDN.

Ссылки CDN:

CSS : 

<link rel="stylesheet" href="cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

JS : 

<script type="text/javascript" src="cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Примечание : использовать.css файл в верхней части файла.Использовать сценарий CDN внутри @section scripts{} - например: 

@section scripts {
    <script type="text/javascript" src="cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    //..
}

// В случае загруженных файлов.

Наилучшей практикой будет включение всех зависимостей в App_Start/BundleConfig.csфайл.а затем зарегистрируйте все пакеты в файле Global.asax.

и получите доступ ко всем сценариям и CSS из файла Bundle.Config в файле _Layout.cshtml следующим образом: 

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")   // in the jquery bundle the the datatables files are included there.
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Одна вещьочень важно ... когда все зависимости будут загружены со страницы _Layout.cshtml, поэтому представление о том, что вы хотите получить доступ к функции DataTable () ... Это должно использовать эту страницу _layout, иначе она не будет работать.

И, наконец, доступ к функции DataTable (). 

  jQuery(document).ready(function(){
           jQuery("#target_table_id").DataTable({
           //...
           //...
       });
    });
...