File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
    
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
   
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link href="https://cdn.datatables.net/2.2.1/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />   
 <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.css" rel="stylesheet" type="text/css" />
​
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <script src="https://cdn.datatables.net/2.2.1/js/dataTables.js"></script>
 <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.js"></script>
   
 </head>
  
  <body>
<div id="tableContainer" class="table-responsive">
    <table id="navigationTabTable" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Tab ID</th>          
                <th>Tab Title</th>
                <th>Tab Script Name</th>
                <th>Tab Active Flag</th>
            </tr>
        </thead>
     </table>
</div>
  </body>
</html>
​
JavaScriptSaved
 
var tabData = [
  {
    NAV_ID:"1.3",
    NAV_DESCRIPTION:"Test Script Name",
    NAV_SCRIPT_NAME:"testScriptName.php",
    NAV_ACTIVE:"Y"
    
 },
];
const editor = new DataTable.Editor({
 
          data: tabData,
​
          fields: [
                    { label: "Tab ID",
                      name:  "NAV_ID",
                    },
                  
                    { label: "Tab Title",
                      name:  "NAV_DESCRIPTION"
                    }, 
                     
                    { label: "Tab Script Name",
                        name:  "NAV_SCRIPT_NAME"
                    }, 
    
                    { label: "Tab Active Flag",
                      name:  "NAV_ACTIVE"
                    }
           ],
               
        table: "#navigationTabTable",
    });
    
const table = new DataTable('#navigationTabTable', { 
​
    layout: {
       top12tart: 'pageLength',
            topStart: {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
            }
         },
​
        pageLength: 15,
        fixedHeader: true,
        lengthMenu: [ [10, 15, 25, 50, -1], [10, 15, 25, 50, 'All'] ],
        displayLength: 15,
        paginationType: 'full_numbers',
        language: {search: 'Table Search: '},
​
        data: tabData,
            
        columns: [
                    {
                        data: null,
                        orderable: false,
                        render: DataTable.render.select(),
                    },
                    { data: "NAV_ID"  },
                      
                    { data: "NAV_DESCRIPTION" }, 
                      
                    { data: "NAV_SCRIPT_NAME" },
                      
                    { data: "NAV_ACTIVE" }
        ],
        
        order: [[1, 'asc']],
        
        select: {
                    style:    'os',
                    selector: 'td:first-child'
                 },
               
});
2 warnings
Line 10: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 35: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers