File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-6gM1RUmcWWtU9mNI98EhVNlLX1LDErxSDu2o/YRIeXq34o77tQYTXLzJ/JLBNkNV" crossorigin="anonymous">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-10kTwhFyUU637a6/7q0kLBdo8jQWjxteg63DT/K8Sdq/nCDaDAkH+Nq/MIrsp8wc" crossorigin="anonymous"></script>
<link href="https://editor.datatables.net/css/editor.bootstrap5.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/js/dataTables.editor.js"></script>
    <script src="https://editor.datatables.net/js/editor.bootstrap5.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Size</th>
            <th>State</th>
          </tr>
        </thead>
​
        <tbody>
          
        </tbody>
      </table>
    </div>
  </body>
</html>
​
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
var json = {"draw":null,"data":[{"DT_RowId":"row_29","Branches":{"Id":29,"Name":"Kent","BranchSize_Id":2,"MarketSize_Id":1,"State_Id":1,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":"KFry","RecordUpdatedDateTime":"\/Date(1604041200000)\/"},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Retail Lending"},"State":{"Name":"WA"}},{"DT_RowId":"row_30","Branches":{"Id":30,"Name":"Federal Way","BranchSize_Id":2,"MarketSize_Id":1,"State_Id":1,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":"KFry","RecordUpdatedDateTime":"\/Date(1604041200000)\/"},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Retail Lending"},"State":{"Name":"WA"}},{"DT_RowId":"row_35","Branches":{"Id":35,"Name":"Seattle","BranchSize_Id":2,"MarketSize_Id":3,"State_Id":1,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":null,"RecordUpdatedDateTime":null},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Large"},"State":{"Name":"WA"}},{"DT_RowId":"row_43","Branches":{"Id":43,"Name":"Tigard","BranchSize_Id":2,"MarketSize_Id":1,"State_Id":5,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":null,"RecordUpdatedDateTime":null},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Retail Lending"},"State":{"Name":"OR"}},{"DT_RowId":"row_47","Branches":{"Id":47,"Name":"Wedgwood","BranchSize_Id":2,"MarketSize_Id":3,"State_Id":1,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":null,"RecordUpdatedDateTime":null},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Large"},"State":{"Name":"WA"}},{"DT_RowId":"row_118","Branches":{"Id":118,"Name":"West Seattle","BranchSize_Id":2,"MarketSize_Id":2,"State_Id":1,"IsAffinity":null,"IsCsc":null,"IsMD":null,"InactiveDate":null,"RecordCreatedBy":null,"RecordCreatedDateTime":null,"RecordUpdatedBy":null,"RecordUpdatedDateTime":null},"BranchSize":{"Name":"Medium"},"MarketSize":{"Name":"Medium"},"State":{"Name":"WA"}}],"recordsTotal":null,"recordsFiltered":null,"error":null,"fieldErrors":[],"id":null,"meta":{},"options":{"Branches.BranchSize_Id":[{"label":"Branch Manager","value":1},{"label":"Medium","value":2},{"label":"Large","value":3},{"label":"CSC","value":11},{"label":"Affinity RM","value":12},{"label":"Affinity Branch Manager","value":21}],"Branches.MarketSize_Id":[{"label":"Affinity 1","value":7},{"label":"Affinity 2","value":16},{"label":"Affinity 3","value":21},{"label":"CSC","value":6},{"label":"CSC LOA","value":24},{"label":"Large","value":3},{"label":"Medium","value":2},{"label":"Retail Lending","value":1}],"Branches.State_Id":[{"label":"AZ","value":6},{"label":"CA","value":3},{"label":"HI","value":2},{"label":"ID","value":4},{"label":"OR","value":5},{"label":"WA","value":1}],"Branches.IsAffinity":[{"value":false,"label":"False"},{"value":true,"label":"True"}],"Branches.IsCsc":[{"value":false,"label":"False"},{"value":true,"label":"True"}],"Branches.IsMD":[{"value":false,"label":"False"},{"value":true,"label":"True"}]},"searchBuilder":null,"searchPanes":null,"files":{},"upload":{"id":null},"debug":["Editor .NET libraries - version 2.4.1",{"Query":"SELECT  [Branches].[Id] as \u0027Branches.Id\u0027, [Branches].[Name] as \u0027Branches.Name\u0027, [Branches].[BranchSize_Id] as \u0027Branches.BranchSize_Id\u0027, [Branches].[MarketSize_Id] as \u0027Branches.MarketSize_Id\u0027, [Branches].[State_Id] as \u0027Branches.State_Id\u0027, [BranchSize].[Name] as \u0027BranchSize.Name\u0027, [MarketSize].[Name] as \u0027MarketSize.Name\u0027, [State].[Name] as \u0027State.Name\u0027, [Branches].[IsAffinity] as \u0027Branches.IsAffinity\u0027, [Branches].[IsCsc] as \u0027Branches.IsCsc\u0027, [Branches].[IsMD] as \u0027Branches.IsMD\u0027, [Branches].[InactiveDate] as \u0027Branches.InactiveDate\u0027, [Branches].[RecordCreatedBy] as \u0027Branches.RecordCreatedBy\u0027, [Branches].[RecordCreatedDateTime] as \u0027Branches.RecordCreatedDateTime\u0027, [Branches].[RecordUpdatedBy] as \u0027Branches.RecordUpdatedBy\u0027, [Branches].[RecordUpdatedDateTime] as \u0027Branches.RecordUpdatedDateTime\u0027 FROM  [Branches] LEFT JOIN [BranchSizes] BranchSize ON [BranchSize].[Id] = [Branches].[BranchSize_Id]  LEFT JOIN [MarketSizes] MarketSize ON [MarketSize].[Id] = [Branches].[MarketSize_Id]  LEFT JOIN [States] State ON [State].[Id] = [Branches].[State_Id] WHERE [Branches].[BranchSize_Id] = @where_0 AND [Branches].[InactiveDate] IS NULL ","Bindings":[{"Name":"@where_0","Value":2,"Type":null}]},{"Query":"SELECT DISTINCT  [Name] as \u0027Name\u0027, [Id] as \u0027Id\u0027 FROM  [BranchSizes] WHERE ([InactiveDate] IS NULL )","Bindings":[]},{"Query":"SELECT DISTINCT  [Name] as \u0027Name\u0027, [Id] as \u0027Id\u0027 FROM  [MarketSizes] WHERE ([InactiveDate] IS NULL ) ORDER BY [Name]  asc ","Bindings":[]},{"Query":"SELECT DISTINCT  [Name] as \u0027Name\u0027, [Id] as \u0027Id\u0027 FROM  [States]  ORDER BY [Name]  asc ","Bindings":[]}],"cancelled":[]};
var marketID = 2;
var editor = new DataTable.Editor( {
 table: '#example',
 fields: [{label: "Branch Size", name: "Branches.BranchSize_Id", 
            type: "tags", multiple: false,
           def: marketID
           }
         ]
} );
​
var table = $("#example").DataTable({
    ajax: function (data, callback, settings) {
    callback(
      json 
    );},
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        }
    },
  columns: [
                    { data: 'Branches.Name' },
                { data: 'Branches.MarketSize_Id', render: function (data, type, row, meta) { return row.MarketSize.Name; } },
                { data: 'Branches.State_Id', render: function (data, type, row, meta) { return row.State.Name; }}
  ]
});
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers