Datatables показывает информацию о дочерних строках без Ajax - PullRequest
Новая
       11

Datatables показывает информацию о дочерних строках без Ajax

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

Я пытаюсь отобразить дополнительную информацию о дочерних строках без использования ajax, дело в том, что он работает хорошо, но я хочу отображать более одного значения в виде списка.
как-то так

Есть предложения?

Я использую web2py, чтобы взять данные и заполнить таблицу, вот моя попытка: 

<script>
            var tabla;
        $(document).ready(function(){
           tabla= $('#tablaGenerica').DataTable( {
            } );

        function format(value) {
              return '<div>Hidden Value: ' + value + '</div>';
          }

        $('#tablaGenerica').on('click', 'td.details-control', function () {
                  var tr = $(this).closest('tr');
                  var row = tabla.row(tr);

                  if (row.child.isShown()) {
                      // This row is already open - close it
                      row.child.hide();
                      tr.removeClass('shown');
                  } else {
                      // Open this row
                      row.child(format(tr.data('child-value'))).show();
                      tr.addClass('shown');
                  }
              });

</script>

<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
        <thead>
            <tr>
                 <th></th>
                 <th class="select-filter">Name</th>
                 <th class="select-filter">Age</th>
                 <th class="select-filter">Country</th>
                 <th class="select-filter">Level</th>
            </tr>
        </thead>
            <tbody>
                   {{for person in formList:}}
                 <tr data-child-value="{{=person.Person.salary}}">
                   <td class="details-control"></td>
                   <td>{{=person.Person.name}}</td>
                   <td>{{=person.Person.age}}</td>
                   <td>{{=person.Person.country}}</td>
                   <td>{{=person.Person.level}}</td>
                </tr>
                {{pass}}
            </tbody>
</table>

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

есть пример для вас 

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
var data = [{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}];
    var table = $('#example').DataTable( {
        "data": data,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
0 голосов
/ 26 апреля 2019

Я бы посоветовал немного реорганизовать ваше приложение, поскольку вам на самом деле не нужно готовить свою HTML-серверную часть, DataTables может справиться с этим для вас на стороне клиента.

Вы можете просто подготовить массив объектов, где каждая запись соответствует строке таблицы, а каждое свойство объекта / внутренний элемент массива - соответствующему столбцу (или записи сведений): 

[
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]

Чтобы связать эти свойства объекта / элементы внутреннего массива со столбцами таблицы, вы можете использовать опцию DataTables columns или columnDefs: 

$('#tablaGenerica').DataTable({
    ...
    columns: [
        {title: 'ID', data: 'id'},
        {title: 'Name', data: 'name'},
        ...
    ]
});

После этого ( и это существенная часть ответа ), чтобы показать несколько деталей в вашей дочерней строке, вам просто нужно изменить функцию format(), чтобы она возвращала HTML разметка дочернего ряда со всеми необходимыми деталями: 

const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;

Итак, полное ДЕМО вашего дела может выглядеть примерно так: 

//specify source data
const dataSrc = [
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
  //specify necessary options to adjust DataTable to your needs
  dom: 't',
  data: dataSrc,
  //specify columns that should be visible initially
  columns: [
    {title: 'ID', data: 'id'},
    {title: 'Name', data: 'name'}
  ]
});
//declare function that renders child row with hidden details
const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
  //get clicked row into a variable
  const clickedRow = dataTable.row($(this));
  //show/hide child row
  clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
  //toggle 'shown' class
  $(this).toggleClass('shown');
});
#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
  cursor: pointer;
  background: lightgray;
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tablaGenerica"></table>
</body>
</html>
...