1

I have created a dynamic table using FooTable jQuery Plugin. http://jsbin.com/wasawa/edit

Here I used MySQL timestamp using PHP date('Y-m-d H:i:s') format. e.g- 2016-01-19 01:22:13, but using the FooTable I'm not getting the actual date format.

Any help would be appreciated.

Syden
  • 8,425
  • 5
  • 26
  • 45
Subhajit
  • 390
  • 3
  • 18

2 Answers2

0

Updated the columns object like below:

{ "name": "createdat", "title": "Created On", "formatter": function(value){ return moment(value).format('MMM Do YY'); } }

I have to update the formatter function.

And now it is working fine as expected.

Thanks for your support.

Subhajit
  • 390
  • 3
  • 18
0

In case this helps someone else with the same problem. I was able to get the example from the site, using the following. You must include moment.js for this to work. https://momentjs.com/

This code won't run in SO's code runner because footable requires localstorage.

It displays the unix time from an external source as whatever you want. I have it using MMM Do YY in this example. 

jQuery(function($) {
  $('#showcase-example-22').footable({
    "useParentWidth": true,
    columns: [

      {
        "name": "id",
        "title": "ID",
        "breakpoints": "xs sm",
        "type": "number",
        "style": {
          "width": 80,
          "maxWidth": 80
        }
      },
      {
        "name": "firstName",
        "title": "First Name"
      },
      {
        "name": "lastName",
        "title": "Last Name"
      },
      {
        "name": "something",
        "title": "Never seen but always around",
        "visible": false,
        "filterable": false
      },
      {
        "name": "jobTitle",
        "title": "Job Title",
        "breakpoints": "xs sm",
        "style": {
          "maxWidth": 200,
          "overflow": "hidden",
          "textOverflow": "ellipsis",
          "wordBreak": "keep-all",
          "whiteSpace": "nowrap"
        }
      },
      {
        "name": "started",
        "title": "Started On",
        "type": "numeric",
        "breakpoints": "xs sm md"
      },
      {
        "name": "dob",
        "title": "Date of Birth",
        "formatter": function(value) {
          var datetime = JSON.parse(value)
          return moment(datetime).format("MMM Do YY")

        }
      },
      {
        "name": "status",
        "title": "Status"
      }
    ],
    rows: [{
        "id": 1,
        "firstName": "Annemarie",
        "lastName": "Bruening",
        "something": 1381105566987,
        "jobTitle": "Cloak Room Attendant",
        "started": 1367700388909,
        "dob": 122365714987,
        "status": "Suspended"
      },
      {
        "id": 2,
        "firstName": "Nelly",
        "lastName": "Lusher",
        "something": 1267237540208,
        "jobTitle": "Broadcast Maintenance Engineer",
        "started": 1382739570973,
        "dob": 183768652128,
        "status": "Disabled"
      },
      {
        "id": 3,
        "firstName": "Lorraine",
        "lastName": "Kyger",
        "something": 1263216405811,
        "jobTitle": "Geophysicist",
        "started": 1265199486212,
        "dob": 414197000409,
        "status": "Active"
      },
      {
        "id": 4,
        "firstName": "Maire",
        "lastName": "Vanatta",
        "something": 1317652005631,
        "jobTitle": "Gaming Cage Cashier",
        "started": 1359190254082,
        "dob": 381574699574,
        "status": "Disabled"
      },
      {
        "id": 5,
        "firstName": "Whiney",
        "lastName": "Keasler",
        "something": 1297738568550,
        "jobTitle": "High School Librarian",
        "started": 1377538533615,
        "dob": -11216050657,
        "status": "Active"
      },
      {
        "id": 6,
        "firstName": "Nikia",
        "lastName": "Badgett",
        "something": 1283192889859,
        "jobTitle": "Clown",
        "started": 1348067291754,
        "dob": -236655382175,
        "status": "Active"
      }
    ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.css" rel="stylesheet" />



<table id="showcase-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true" data-state="true"></table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.js"></script>
enter code here
Matt Williams
  • 1