File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<!--    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css"/>
-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.13.1/af-2.5.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/b-print-2.3.3/fc-4.2.1/fh-3.3.1/datatables.min.css"/>
<!--    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.3.1/css/fixedHeader.dataTables.min.css"/>
-->
​
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.13.1/af-2.5.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/b-print-2.3.3/fc-4.2.1/fh-3.3.1/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.13.1/sorting/natural.js"></script>
    
<!--    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.3.1/js/dataTables.fixedHeader.min.js"></script>
-->
    <meta charset=utf-8 />
  </head>
  <body>
    <div class="container">
      <table class="DT_table table table-striped table-bordered hover" style="width:100%">
      <thead class="alert-success">
        <tr>
          <th class="dt-head-center text-normal light-grey-text">#</th>
          <th class="dt-head-right" data-columnDefs="">الوحدة</th>
          <th class="dt-head-right">القيمة</th>
          <th class="dt-head-right">القيمة</th>
          <th class="dt-head-right">القيمة</th>
          <th class="dt-head-right">القيمة</th>
          <th class="dt-head-right">القيمة</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">1 - أحمد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr" style="direction:ltr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-03: سداد 30,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 5,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 8,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">2 - سيد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">1 - أحمد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr" style="direction:ltr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-03: سداد 30,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 5,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 8,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">2 - سيد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">1 - أحمد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr" style="direction:ltr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-03: سداد 30,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 5,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 8,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">2 - سيد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">1 - أحمد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr" style="direction:ltr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-03: سداد 30,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 5,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
            <div class="div-rec">2023-01-05: سداد 8,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
        <tr>
          <td class="text-center text-normal light-grey-text font12px">1</td>
          <td class="unit-info">2 - سيد</td>
          <td>360</td>
          <td class="bg-light-gray-e2">50,000</td>
          <td class="amount">53,000<button class="btn-add-payment btn btn-sm btn-success pull-left hidden-print" data-idx="1"><span class="fa fa-plus"></span></button></td>
          <td class="rrr">-3,000</td>
          <td>
            <div class="div-rec">2023-01-02: سداد 10,000<span class="fa fa-edit font20px pull-left non-visible hidden-print"></span></div>
          </td>
        </tr>
      </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
  direction: rtl
}
​
th input {
  width: 100%
}
​
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
  margin: 0 auto;
}
​
.dataTables_filter,
.dt-buttons.btn-group{
  position: sticky;
  right: 0;
  width: fit-content;
}
​
th, td {
  white-space: nowrap;
}
JavaScriptSaved
 
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    //$('#example thead tr').clone(true).addClass('filters').appendTo( '#example thead' );
    var table = $('.DT_table').DataTable( {
       //dom: 'Bfr',
      dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>",
      paging: false,
      scrollX: true,
      fixedHeader: true,
      fixedColumns: {left: 2},
      columnDefs: [{
        type: 'natural', targets: 1,
      }],
      buttons: [
      {
        extend: 'excel',
        text: '<i class="dt-btn-icon fa fa-2x fa-file-excel-o"></i>',
        className: 'btn btnExport',
      },
      {
        extend: 'print',
        text: '<i class="fa fa-2x fa-print">',
        className: 'btn btnPrint',
        messageTop: $(document).find('h4').html(),
        customize: function (win) {
          $(win.document.body).find('h1').css('text-align','center');
          $(win.messageTop).find('h4').css('text-align','center');
          console.log(win.document);
        },
      }],
    });
});
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