File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <!-- CSS -->
    <link href="https://xkp.ftp.sh/inc/css/bootstrap.min.css" rel="stylesheet">             <!-- 4.6.0 -->
    <link href="https://xkp.ftp.sh/inc/css/datatables/datatables.min.css" rel="stylesheet"> <!-- 1.10.24 ++ Responsive 2.2.7 ++ Bootstrap4  -->  
    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://xkp.ftp.sh/inc/js/bootstrap.min.js"></script>                      <!-- 4.6.0 -->
    <script src="https://xkp.ftp.sh/inc/js/datepicker/bootstrap-datepicker.js"></script>    <!-- 1.9.0 --> 
    <script src="https://xkp.ftp.sh/inc/js/datatables/datatables.min.js"></script>          <!-- 1.10.24 ++ Responsive 2.2.7 ++ Bootstrap4  -->  
    <script src="https://xkp.ftp.sh/inc/js/datatables/ellipsis.js"></script>                <!-- 1.10.24 -->
    <script src="https://xkp.ftp.sh/inc/js/datatables/deeplink.min.js"></script>            <!-- 1.10.24 --> 
​
    <meta charset=utf-8 />
    <title>DT Responsive + DeepLinking + Ellipsis + Render</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="table table-hover table-bordered dt-responsive nowrap" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Size</th>
            <th>Category</th>
            <th>Subcat</th>
            <th>User</th>
            <th>Created_at</th>
          </tr>
        </thead> 
        <tbody>
          <tr>
            <td>id_1</td>
            <td>Physics_U12_LongName</td>
            <td>134134</td>
            <td>6 Grade</td>
            <td>Physics</td>
            <td>Director</td>
            <td>2011/07/25</td>
          </tr>
          <tr>
             <td>id_1</td>
            <td>Math Math Math</td>
            <td>134134</td>
            <td>6 Grade</td>
            <td>Physics</td>
            <td>Director</td>
            <td>2011/07/25</td>
          </tr>
          <tr>
             <td>id_1</td>
            <td>HistoryHistoryHistoryHistory</td>
            <td>134134</td>
            <td>6 Grade</td>
            <td>Physics</td>
            <td>Director</td>
            <td>2011/07/25</td>
          </tr>
          <tr>
             <td>id_1</td>
            <td>English English English_EnglishEnglishEnglishEnglishEnglishEnglishEnglish</td>
            <td>134134</td>
            <td>6 Grade</td>
            <td>Physics</td>
            <td>Director</td>
            <td>2011/07/25</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
JavaScriptSaved
 
$.fn.dataTable.render.multi = function(renderArray) { return function(d, type, row, meta) { for(var r = 0; r < renderArray.length; r++) { d = renderArray[r](d, type, row, meta); } return d; }; };
$.fn.dataTable.render.text = function () { return function ( data, type, row ) { if ( type === 'display' ) { var str = '<a href="#xkp-preview" data-toggle="modal" data-id="'+row.id+'" data-title="'+row.name+'"  data-target="#preview-modal" data-tooltip="tooltip" title="Натиснете върху файла, за да го прегледате.">'+data+'</a>'; return str; } return data; }; };      
$(document).ready(function() {
    var searchOptions = $.fn.dataTable.ext.deepLink( ['search.search'] );
    var defaultOptions = {
        processing: true, 
        columns: [ 
            { data: "id"  //,visible: false 
            }, 
            { data: "name", 
               render: $.fn.dataTable.render.multi([ 
                    $.fn.dataTable.render.ellipsis( 65, false, true ), 
                     $.fn.dataTable.render.text() 
               ])   
            }, 
            { data: "size" //,visible: false 
            }, 
            { data: "category", width: "1%" }, 
            { data: "sub_category", width: "1%" }, 
            { data: "user", width: "1%" }, 
            { data: "created_at", width: "1%" } 
        ], 
      responsive: {
                details: {
                    renderer: function ( api, rowIdx, columns  ) {
                        var xkp = 'x  '+data;
                        //var xkp ='<li data-dtr-index="xkp" data-dt-row="xkp" data-dt-column="xkp"><span> '+columnIndex+' Свали от тук: <a href="download.php?id='+rowIdx.id+'"><i class="fas fa-cloud-download-alt"></i></a></span></li>';
                        //var data2 = $.map( columns, function ( col ) {
                        //  return '<li data-dtr-index="xkp" data-dt-row="xkp" data-dt-column="xkp"><span> '+col.data+' Свали от тук: <a href="download.php?id=""><i class="fas fa-cloud-download-alt"></i></a></span></li>';
                        //});   
                        var data = $.map( columns, function ( col, i ) {
                            return col.hidden ? 
                                '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                    '<span class="dtr-title">'+col.title+'</span> '+
                                    '<span class="dtr-data">'+col.data+'</span>'+ 
                                '</li>' : ''; 
                        } ).join('');
                        return data ? $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data+xkp ) : false;
                    }
                }
            }, 
    };
    
    $('#example').DataTable($.extend( defaultOptions, searchOptions ));
});
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers