Блог

Главная - Вопросы по программированию - как создать столбец для автоматического серийного номера, чтобы найти количество записей в jquery datatable

как создать столбец для автоматического серийного номера, чтобы найти количество записей в jquery datatable

#jquery #datatable

#jquery #datatable

Вопрос:

У меня есть DataTable, первый столбец sl no, который я хочу сделать автоматическим серийным номером 1,2,3,4…… Я хочу, чтобы столбец id автоматически увеличивался.

{ data: "id", title: "Sl. No." } 

  $('#myTable').DataTable({
                        columnDefs: [
                            {
                                "targets": [0, 1, 2, 3, 4, 5], // your case first column
                                "className": "text-center",
                            }
                        ],
                        "bDestroy": true,
                        "scrollX": true,
                        data: dataSet,
                        dom: 'Bfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ],
                        columns: [
                            { data: "id", title: "Sl. No." },
                            {
                                "data": "updatedDate", title: "Time", render: function (data, type, row) {
                                    return moment(row.updatedDate).format('DD/MM/YYYY hh:mm:ss A');
                                }
                            },
                            { data: "voltage", title: "Voltage" }

                        ],
                        order:[0,"desc"]
                    });

Комментарии:

1. Не могли бы вы изменить свой dataset для этого перед переходом к плагину?

2. Попробуйте: { data: «id», title: «Sl. No.», render:functon(data,type.row){return row.index();} }

Ответ №1:

Вот пример, который добавляет серийный номер в datatable с помощью columnDefs и его визуализации option 

 var dataSet = [{"name":"Wade Rodriguez","age":21},{"name":"Maxwell Rush","age":31},{"name":"Ruiz Murray","age":40},{"name":"Tanner Crosby","age":37},{"name":"Shelby Douglas","age":25},{"name":"Haney Fulton","age":35}]

$(document).ready(function() {

  $("#myTable").DataTable({
    data: dataSet,
    "columns": [{
        "title": "Sl. No."
      },
      {
        "data": "name",
        "title": "Name"
      },
      {
        "data": "age",
        "title": "Age"
      }
    ],
    "columnDefs": [{
      "render": function(data, type, full, meta) {
        dataSet[meta.row].id = meta.row   1; // adds id to dataset
        return meta.row   1; // adds id to serial no
      },
      "targets": 0
    }],
  });

  console.log(dataSet)
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="myTable" class="display" cellspacing="0" width="100%">
</table>