标签: footable

我正在使用footable我需要在按钮点击时重新加载它但没有将html附加到表中,我需要从sql重新加载它,因为它是第一次填充,是可能的

我试图在div $("#BusList").load(location.href + " #BusList");中加载数据,但设计完全搞砸了

  <div class="row" id="BusList">
  <table id="demo-foo-filtering" class="table table-striped table-bordered toggle-circle m-b-0" data-page-size="7">
    <thead>
    <tr>
        <th data-toggle="true">Name</th>
        <th>Company</th>
        <th data-hide="phone">Bus Type</th>
        <th data-hide="phone">Bus Model</th>
        <th data-hide="phone">Bus Color</th>
        <th data-hide="phone, tablet">Driver Status</th>
        <th data-hide="phone, tablet">Bus Status</th>
        <th data-hide="phone, tablet"></th>
    </tr>
    </thead>
    <tbody>
    <%
        for (int i = 0; i < BusList.Count; i++)
        {  %>
    <tr class="gradeX">
        <td><%=BusList[i].Name %></td>
        <td><%=BusList[i].CompanyName %></td>
        <td><%=BusList[i].BusType %></td>
        <td><%=BusList[i].BusModel %></td>
        <td><%=BusList[i].BusColor %></td>
        <td><span class="<%= BusList[i].DriverBusStatus == 1?"label label-table label-success":"label label-table label-inverse"%>"><%=BusList[i].DriverBusStatusDesc %></span></td> …

我试图使用footable(http://themergency.com/footable-demo/responsive-container.htm)和angular.js.

随着窗口大小的减小,仅在单击加号时显示第3,4,5列.

Angular.js提供了过滤功能,所以当我输入一些搜索字符串时,如下所示:

表中的行被过滤.

现在的问题是当我尝试删除此搜索字符串时,如下所示:

所有行都会再次显示,但UI会失真.

我试图在angular.js中使用回调

$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}

但是没有用,如果有人可以建议如何解决这个问题.

谢谢.

我需要在jQuery Mobile Foo Table中提供一点帮助.我在表中动态添加数据.

HTML:

    <table id="tblSRNDetails" class="footable">
        <thead>
            <tr>
                <th data-class="expand">SRN</th>
                <th >Failure Date</th>  
                <th >Complaint Report Date</th>                 
                <th>Promised Date</th>  
                <th >Customer Name</th>
                <th >Log Time</th>
                <th >Create FSR</th>    
                <th  data-hide="phone,tablet">Days Open</th>        
                <th  data-hide="phone,tablet">SRN Allocated Time</th>   
                <th  data-hide="phone,tablet"> SRN Status</th>  
                <th  data-hide="phone,tablet"> ESN Number</th>  
                <th  data-hide="phone,tablet"> Request Type</th>    
                <th  data-hide="phone,tablet">Service Request Details</th>                          
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

js代码:

$("#page-id").live('pagebeforeshow', function() {
    console.log("Page before show");
    $("#tblSRNDetails > tbody tr").remove();
    for (var indx = 0; indx < 2; indx++ ) …

到目前为止,我很喜欢Footable!

我已经按照排序和过滤演示,它正在我的本地系统上工作.(足球演示)

我遇到的一件事是:

使用下拉列表触发过滤器时,它会获取下拉列表的文本值,并过滤具有该匹配文本的所有列.有时这会产生意想不到的结果,因为文本可能与其中一列中的某个单词的中间匹配.

我的问题是:

您可以指定要过滤的列吗？或者可能的替代方案是如何指定完全匹配？

我目前正在开发一个将在表格中显示数据的Web应用程序.

对于此应用程序的一部分,我们列出了某些应用程序的当前状态.如果单击表中的某个应用程序,则ajax调用会在我们的数据库中获取应用程序的ID,并提取该应用程序的所有状态列表及其日期.

虽然这一切都很好,花花公子,我们的问题是以分页的形式出现.如果您导航到第一个表的第二页,该表包含每个应用程序的当前状态,并单击具有五个以上状态列表的应用程序(我们的数据页面大小限制为5),那么第二个表将从第二页数据开始.

虽然导航回第一页有效,并且表中的数据仍然正确显示,但这是我们不想要的问题.我们想要做的是让分页自动显示表重新加载的第一页结果.

我们到目前为止所尝试的是为footable找到页面重置触发器,尝试定位表格页脚中的第一个页面项目并执行.click(我们无法找到一种方法来定位它,因为它是如何生成的) ,重新初始化表,并在我们可以使用的footable javascript文件中找到预制函数.

我想知道的是,有没有办法设置分页在表格重绘上显示第一页？

_{目前,我们正在重新绘制表格以修复我们遇到的另一个分页问题.}

目前的代码:

function getAppStats(id) {
        $.ajax({
            Async: false,
            url: '@Url.Action("GetAppStatusList", "Application", Nothing, Request.Url.Scheme)',
            type: 'POST',
            data: { id: id },
            success: function (data) {
                var label = "" 

                //The headers change on the new table, so I need to change the headers dynamically
                var newHTML = "<thead><tr><th data-toggle=\"true\">Application</th><th>Application ID</th><th>Date</th><th>Status</th></tr></thead><tbody>"

               //Iterating through the list of statuses, and if it's not one of three values, assigning an on-click to display more data.
                $(data).each(function (index, …

我正在尝试实现Footable,一个用于使表响应的JQuery插件.Footable有一个附加组件可以添加分页.[演示]

和(http://fooplugins.com/footable/demos/paging.htm)使用分页插件.我尝试过这个演示,但我的分页是一个垂直的无序列表.按钮功能但难看.这是一个链接图像,我不能在这里发布,因为我的回复不够高.

这是我的表代码:

<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
    <thead>
        <th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
        <th>Submission Time</th>
    </thead>
    <tbody>
        <tr ng-repeat="(key, response) in formResponses">
            <td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
            <td>{{response.submission_time}}</td>
        </tr>
    </tbody>
    <tfoot class="">
        <tr>
            <td colspan="5">
                <div class="pagination pagination-centered"></div>
            </td>
        </tr>
    </tfoot>
</table>

如何限制表格页脚中显示的页码,如果我有1000行,并且data-page-size为10则会在页脚中显示许多页码.那么有没有任何数据属性可以提到只显示一些像这种格式的页码

<< 1 2 3 >>

我的问题是如何在DOM中更新一组元素时获得1个事件或渲染回调？如果我按照Blaze wiki https://github.com/avital/meteor-ui-new-rendered-callback中的链接,这不是我想要的.如果我遵循第二个建议,我将获得尽可能多的渲染调用,因为我有元素.并且父元素只会在页面加载时获得1个渲染回调.

在我的例子中,我使用Footable Jquery插件来格式化表格.初始加载工作正常,但是如果我在Collection find中更改过滤器变量,则DOM会更新并且不会再次调用渲染,因为Blaze只调用渲染一次.我不想把它放到另一个模板中,因为这只意味着对渲染的多次调用,因此当它只需要一个整个表时,就会多次调用Footable.

任何帮助表示赞赏.

<template name="customerData">
  <table class="table">
    {{#each dataRows}}
    <tr>
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{email}}</td>
     {{#each phones}}
        <td>{{phone}}</td>
     {{/each}}
    </tr>
    {{/each}}
  </table>
</template>

Template.customerData.rendered = function(){
  $(".table").footable();
}

Template.customerData.phones = function(){
    var result = [];

    _.each(this.phoneNumbers, function(element, index, list){
       result.push({ phone: element});
    });

return result;
}

我正在尝试添加来自Ajax的记录作为响应.我的代码如下;

Ps:我可以alert正确地看到命令的ajax响应.

Html代码

<table id="seller-table" class="table" data-filter="#filter" data-page-size="5">
    <thead>
        <tr>
            <th data-toggle="true">ID</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

数据为json

 var data = [{"id": 10, "date": "Mon Aug 04 2014 17:00:00"}, 
             {"id": 11, "date": "Tue Aug 05 2014 17:00:00"},
             {"id": 12, "date": "Wed Aug 06 2014 17:00:00"}];

jQuery代码

    $.ajax({
        url : '/bid/find/',
        data: {  },
        success : function(data) {
            $('table tbody').append(data);
            $('table').trigger('footable_redraw');
        },
        error : function(xhr, statusText, error) { 
            alert("Error! Could not retrieve the data.");
        }
    });

我正在使用 footable.js 插件对我的 MVC 应用程序中的表格进行排序。单击包含整数值的列的行标题时，它们将按如下方式排序：

81, 811, 776, 700, 70

我可以对这个库做些什么来使整数列的排序能够按值排序：

811,776,700,81, 70

任何帮助将不胜感激！

我试图通过twitter bootstrap集成的优秀footable插件不会初始化.也就是说,感谢我的firebug检查员,我可以看到该表是由footable插件处理的,但我总是希望隐藏该行:

data-hide="all"

是可见的.如果我改变浏览器的大小,那么表格就有我期望在页面启动时应该具有的行为.

我尝试过firefox/chrome和不同的jQuery版本,但仍然相同!

我采取了最简单的足迹示例,看看发生了什么,但没有更多的运气!据说它足以与开箱即用的bootstrap一起工作.

我正在使用requireJS在我的页面上加载大量脚本,但没有错误.我无法理解如何通过footable识别表格,但它的属性不会激活!

感谢您的任何调查方式!

编辑:我已经明白问题来自我的表是在页面加载隐藏div(使用引导向导)所以添加:

onTabShow: function(tab, navigation, index) {
if(index===3){
        $('.footable').trigger('footable_initialize');
}

}

做了诀窍:)

我正在使用FooTable(http://fooplugins.github.io/FooTable/docs/getting-started.html)从我的静态html表创建一些动态表.

在表格的单元格或标签内是html格式化单元格中的值.例如,我在一个单元格中使用bootstraps标签组件.

我遇到的问题是,当footable运行时,它会转换所有html格式,并且似乎从单元格中删除所有这些html标签,而我只是留下了文本.

例如,我可能在一个单元格中:

<td><span class="label label-default">Default</span></td>

转换为:

<td>Default</td>

我的问题是有一个选项可以阻止这种情况发生吗？我搜索谷歌和可用的文档,但我没有运气.

似乎没有很多人遇到过这个问题.但肯定有人知道它是否可能.

我在AngularJS中遇到fooTable的问题,这就是我正在做的事情:

<table class="table m-b-none" ui-jq="footable" data-filter="#filter" data-page-size="5">
    <thead>
        <tr>
            <th data-toggle="true">Name</th>
            <th data-hide="phone">Logo</th>
            <th data-hide="phone,tablet">Website</th>
            <th data-hide="phone,tablet" data-name="Friendly URL">URL</th>
            <th data-hide="all">External Parameter 1</th>
            <th data-hide="all">External Parameter 2</th>
            <th data-hide="all">Meta Keywords</th>
            <th data-hide="all">Meta Description</th>
            <th data-hide="all">Period</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="store in stores">
            <td>{{store.name}}</td>
            <td><img ng-src="{{store.logo}}" /></td>
            <td>{{store.website}}</td>
            <td>{{store.friendly_url}}</td>
            <td>{{store.external_parameter1}}</td>
            <td>{{store.external_parameter2}}</td>
            <td>{{store.meta_keywords}}</td>
            <td>{{store.meta_description}}</td>
            <td>{{store.period}}</td>
            <td data-value="1">
                <!--Edit Button-->
                <a type="button" class="btn btn-xs btn-default" ui-sref="app.store.edit({editId: store.id})">
                    <i class="fa fa-pencil"></i>
                </a>
                <!--Delete Button-->
                <a type="button" class="btn btn-xs btn-default" …