Как я могу установить содержимое по умолчанию для моей ячейки jQuery DataTable в нажимаемую кнопку? - PullRequest
Новая
       21

Как я могу установить содержимое по умолчанию для моей ячейки jQuery DataTable в нажимаемую кнопку?

0 голосов
/ 30 марта 2019

В случае, если типом моего вывода данных является объект, я хотел бы, чтобы вся ячейка превратилась в ссылку.

До сих пор мне удавалось только превратить данные внутри ячейки в ссылку, но мне не удалось превратить всю ячейку в ссылку. 

"render": function (data, type, row, meta) {
          var link = "{{output.content}}";
          var type = typeof data;
          if(type == "object"){
            if(Array.isArray(data)){
              data.forEach(function(obj) {
                if (obj.hasOwnProperty("category")) {
                  data.sort((a,b) => Number(a.category.id) - Number(b.category.id));
                }
              })
              return (data.map(obj => obj.category ? `<div style="border-color:${obj.category.color}" class="circle"></div> ${obj.name}` : ` <a href="`+content+`">This is my link</a>${obj.name}`)).join('<br>');
            }else {
              if(data){
                return data.name;
              } else {
                return '';
              }
            }
          } else {
            if(String(data).indexOf('#') == 0) {
              return '<div style="border-color:'+ data +'" class="circle"></div>';
            } else {
              return data;
            }
          }
        },
        "targets": "_all"

Ответы [ 2 ]

1 голос
/ 30 марта 2019 
Try this. Just replace the button with a link.

 $(document).ready(function() {
   var table = $('#example').DataTable( {
    "ajax": "data/arrays.txt",
    "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]
    } );

     $('#example tbody').on( 'click', 'button', function () {
      var data = table.row( $(this).parents('tr') ).data();
      alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );


HTML
=============

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

Вы можете использовать опцию columns.className, чтобы назначить некоторый класс определенным ячейкам, а затем сделать эти ячейки отображаемыми в виде гиперссылки с некоторым CSS и, наконец, присоединить обработчик кликов к этому конкретному классу, который будет перенаправлять на нужный URL: 

const srcData = [
  {id: 1, name: 'stackvoerflow', url: 'https://stackoverflow.com'},
  {id: 2, name: 'wikipedia', url: 'https://wikipedia.org'},
  {id: 3, name: 'github', url: 'https://github.com'}
];

const dataTable = $('#mytable').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'id', data: 'id'},
    {title: 'name', data: 'name', className: 'link'}
  ]
});

$('#mytable').on('click', '.link', function(){
  window.location.href = dataTable.row($(this).closest('tr')).data().url;
});
.link {cursor: pointer}
<!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="mytable"></table>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...