Question

我使用FooTable jQuery插件创建了一个动态表。 http://jsbin.com/wasawa/edit

这里我使用PHP date('Y-m-d H:i:s')格式的MySQL时间戳。例如2016-01-19 01:22:13，但使用FooTable我没有得到实际的日期格式。

任何帮助都将不胜感激。

Answer 1

更新了列对象，如下所示：

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

我必须更新格式化程序功能。

现在它正如预期的那样正常工作。

感谢您的支持。

Answer 2

如果这有助于其他人遇到同样的问题。我能够从网站上获得示例，使用以下内容。你必须包含moment.js才能使用。 https://momentjs.com/

此代码不会在SO的代码运行器中运行，因为footable需要localstorage。

它会根据您的需要显示来自外部源的unix时间。我在这个例子中使用MMM Do YY。

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

FooTable插件日期时间问题

2 个答案: