Столбцы DataTables, columnDefs и rowCallback HTML5 инициализация - PullRequest
Новая
       21

Столбцы DataTables, columnDefs и rowCallback HTML5 инициализация

0 голосов
/ 12 апреля 2019

У меня в настоящее время есть таблица данных (версия 1.10.18), загруженная несколькими опциями с помощью js, но мне нужно сделать свой код более пригодным для повторного использования, и я пытаюсь инициализировать свою таблицу данных с помощью атрибутов html5 data- *. 

<table id="dataTable" cellspacing="0" width="100%" data-source="ajax.mysource.php">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th><i class="fas fa-low-vision"></i></th>
        </tr>
    </thead>
</table>

мой код jQuery выглядит так: 

var dataTable = $('#dataTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: $('#dataTable').data('source'),
    columns: [
        { 'data': 'name' },
        { 'data': 'address' },
        { 'data': 'visible' }
    ],
    order: [[ 1, 'asc' ], [ 0, 'asc' ]],
    responsive: true,
    nowrap: true,
    pageLength: 15,
    lengthChange: false,
    select: 'single',
    columnDefs: [
        {   targets: 0, width: "110px" },
        {   targets: 1, width: "150px" },
        {   targets: 1, render: $.fn.dataTable.render.ellipsis(80) },
        { targets: 2, render: $.fn.dataTable.render.visibilityIcon() }
    ],
    rowCallback: function(row, data, index) {
        if (data.visible == "0") {
            $(row).addClass("notVisible");
        }
    }
});

Есть несколько общих опций, которые я бы использовал для каждой таблицы данных, но было бы здорово, если бы я мог установить столбцы, columnDefs и rowCallBack непосредственно в моем html, используя атрибуты html5 data- *, чтобы я мог использовать тот же код для разные таблицы, например: 

<th data-columns="address" data-column-defs="{targets: 1, width:'150px'}" data-row-callback="function...">Address</th>

Я нигде не нашел, как использовать атрибуты html5- *, кроме порядка, сортировки и длины страницы.

Возможно ли установить эти параметры с помощью html5 с помощью datatables.js?

1 Ответ

2 голосов
/ 14 апреля 2019

Сначала вам нужна версия 1.10.5, как указано здесь

Начиная с v1.10.5 DataTables также может использовать параметры инициализации, считанные из данных HTML5- * атрибуты

Затем вы должны поместить атрибуты данных в элемент таблицы, а не в элементы столбца. 

<table  id="example"
data-column-defs='[{"targets": 0, "width": "200px"}]' 
data-page-length='2'
data-class="dataTable" 
data-order='[[ 1, "asc" ]]'
data-columns='[{"data": "name"}, {"data": "position"}]'
>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Start Date</th>
            <th>office</th>
        </tr>
    </thead>

</table>

Вот полный фрагмент для вас 

var data = [
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh"
    },
    {
        "name":       "Jane Doe",
        "position":   "SW Architect",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh"
    },
    {
        "name":       "John Doe",
        "position":   "SW Developer",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh"
    }
];
var oTable = $('#example').dataTable({
	data: data

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table  id="example"
data-column-defs='[{"targets": 0, "width": "200px"}]' 
data-page-length='2'
data-class="dataTable" 
data-order='[[ 1, "asc" ]]'
data-columns='[{"data": "name"}, {"data": "position"}]'
>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Start Date</th>
            <th>office</th>
        </tr>
    </thead>
    
</table>
...