Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css"/> 
    
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
  
     <script src="//code.jquery.com/jquery-1.12.4.js"></script>
     <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
     <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
     <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
     <script src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
     <script src="../../extensions/Editor/js/dataTables.editor.min.js"></script>
  
</head>
<body>
​
  <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="main_table">
    <thead>
        
        <tr>                    
            <th></th>
            <th>Item Code</th>
            <th>Item Category</th>
            <th>Item Description</th>       
        </tr>
        
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>            
</table>
  
</body>
</html>
 
var categoryData = [
    { "text": "NON-CONSUMABLES", "id": "62a71479-2ac8-44ea-b119-85c718dfa545" },
    { "text": "CONSUMABLES", "id": "b1668ac6-724a-4a3b-8bf9-318f41e76b51" },
    { "text": "ELECTRONICS", "id": "7cd96ad2-e9b0-4645-a82d-613b502e7108" },
    { "text": "FAST MOVING", "id": "b6ef3eb0-c99b-48d5-8131-7697693b06e1" },
    { "text": "SERVICES", "id": "adf812e7-2ea7-424a-a339-ef8eadb1ec57" }
];
​
var dataSet = [
  {
    "inventory_main_list_code": "ITM0001",
    "inventory_main_list_cat_link_uuid": "62a71479-2ac8-44ea-b119-85c718dfa545",
    "inventory_main_list_desc": "Food"       
  },
  {
    "inventory_main_list_code": "ITM0002",
    "inventory_main_list_cat_link_uuid": "b1668ac6-724a-4a3b-8bf9-318f41e76b51",
    "inventory_main_list_desc": "Snacks" 
  },
  {
    "inventory_main_list_code": "ITM0003",
    "inventory_main_list_cat_link_uuid": "b6ef3eb0-c99b-48d5-8131-7697693b06e1",
    "inventory_main_list_desc": "Bread" 
  },
  {
    "inventory_main_list_code": "ITM0004",
    "inventory_main_list_cat_link_uuid": "62a71479-2ac8-44ea-b119-85c718dfa545",
    "inventory_main_list_desc": "TV" 
  },
  {
    "inventory_main_list_code": "ITM0005",
    "inventory_main_list_cat_link_uuid": "adf812e7-2ea7-424a-a339-ef8eadb1ec57",
    "inventory_main_list_desc": "Tissue" 
  },
  {
    "inventory_main_list_code": "ITM0006",
    "inventory_main_list_cat_link_uuid": "b1668ac6-724a-4a3b-8bf9-318f41e76b51",
    "inventory_main_list_desc": "Tea" 
  },
  {
    "inventory_main_list_code": "ITM0007",
    "inventory_main_list_cat_link_uuid": "62a71479-2ac8-44ea-b119-85c718dfa545",
    "inventory_main_list_desc": "Coffee" 
  },
  {
    "inventory_main_list_code": "ITM0008",
    "inventory_main_list_cat_link_uuid": "b1668ac6-724a-4a3b-8bf9-318f41e76b51",
    "inventory_main_list_desc": "Perfume" 
  },
  {
    "inventory_main_list_code": "ITM0009",
    "inventory_main_list_cat_link_uuid": "62a71479-2ac8-44ea-b119-85c718dfa545",
    "inventory_main_list_desc": "Pencil" 
  },
  {
    "inventory_main_list_code": "ITM0010",
    "inventory_main_list_cat_link_uuid": "adf812e7-2ea7-424a-a339-ef8eadb1ec57",
    "inventory_main_list_desc": "Biro" 
  }
 ];
​
/*
var editor_main_list;
​
editor_main_list = new $.fn.dataTable.Editor( {
"ajax": {
        "url": "",
        "type": "POST",
        "data": dataSet
      },
table: "#main_table",
fields: [ 
            {
                label: "Item Category:",
                name: "inventory_main_list_cat_link_uuid",
                type: 'select2',
                options: categoryData
            },      
            {
                label: "Item Code:",
                name: "inventory_main_list_code"
            },                          
            {
                label: "Item Description:",
                name: "inventory_main_list_desc"
            }
    ]
});
​
// Activate an inline edit on click of a table cell
$('#main_table').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor_main_list.inline( this );
} );
*/
​
$('#main_table').DataTable ( 
​
{
​
    "dom": "Bfrtip",                                
    "order": [[ 1, "desc" ]],
    "data": dataSet,                      
    "columnDefs": [
        {
            "targets": [ 1 ],
            "visible": true,
            "searchable": true
        }                       
    ],
                        
    "columns": [
        {
            data: null,
            defaultContent: '',
            className: 'select-checkbox',
            orderable: false
        },                                      
        { "data": "inventory_main_list_code"},      
        { "data": "inventory_main_list_cat_link_uuid"},
        { "data": "inventory_main_list_desc"}       
    ],
    "select": {
        style:    'os',
        selector: 'td:first-child'
    },
    "buttons": [
        //{ extend: "create"    , editor: editor_main_list ,"className": "btn btn-primary"},
        //{ extend: "edit"  , editor: editor_main_list ,"className": "btn btn-info"},
        //{ extend: "remove"    , editor: editor_main_list ,"className": "btn btn-warning"}
    ]
    
}); 
​
​
​
​
​
​
​
Output

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

Dismiss x
public
Bin info
davykiashpro
0viewers