对角度数据表中括号内的数字进行排序

2024-04-25

我在用角度数据表 http://l-lin.github.io/angular-datatables/根据网络服务响应填充我的表。我的网络服务返回一个如下所示的 json

[
 {
  "id": 1,
  "name" : "abc",
  "count": "(20)"
 },
 {
  "id": 2,
  "name" : "abc2",
   "count": "20"
 },
{
  "id": 3,
  "name" : "abc3",
  "count": "(30)"
 }
] 

我可以将 JSON 数组绑定到下表中的 $scope 变量

<table  datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
     <thead>
             <tr> 
                 <th>id</th>
                 <th>name</th>
                 <th>count</th>
             </tr>
     </thead>

     <tbody ng-repeat= "item in items">
         <td> {{item.id}} </td>
         <td> {{item.name}} </td>
         <td> {{item.count}} </td>
     </tbody>
 </table>

The id and name列按升序和降序正确排序,但count列不是根据数字排序的。相反,它在排序和排序时考虑“(”。我希望计数列的排序结果为

在升序中

20

(20)

(30)

现在我按升序排列

(20)

(30)

20

谁能建议我需要应用什么逻辑?


您可以使用列渲染函数。当数据表需要值时count列,并希望使用该值sort列,然后传回包含列数据的数字部分的键入数字:

$scope.dtColumnDefs = [
   DTColumnDefBuilder
     .newColumnDef(2)
     .withOption('type', 'number')
     .renderWith(function(data, type, full) {
        if (type == 'sort') { 
           var value = data.match(/\d+/);
           if (value == null) {
              return 0
           } else {
              value = parseFloat(value[0]);
           } 
           return value.toString().length != data.length ? value+0.0001 : value;
        } 
        return data              
    })
]; 

这里我补充一下0.0001包含非法字符的值,例如(- 通过这样我们可以确保值以正确的顺序显示,即所有20已分组together在所有之前(或之后)(20).

演示->http://plnkr.co/edit/Zyp0yphHfxnElEjMMOh2?p=preview http://plnkr.co/edit/Zyp0yphHfxnElEjMMOh2?p=preview


注意:我会迭代<tr>'s, not <tbody> :

<tbody>
    <tr ng-repeat="item in items">
        <td> {{item.id}} </td>
        <td> {{item.name}} </td>
        <td> {{item.count}} </td>
    </tr>
</tbody>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

对角度数据表中括号内的数字进行排序 的相关文章

  • 如何将日期格式设置为 (dd/mm/yyyy hh:mm:ss)

    如何将下面的日期转换为此模板 dd mm yyyy hh mm ss 05 04 2021 14 52 我尝试这样做 但我只得到时间 而不是日期和时间 var data new Date 05 04 2021 14 52 var time
  • 带有路径连接器的 jQuery 可拖动小部件

    参考该图像 Block1 和Block2 都是可拖动的 我的问题是 如何在两个块之间制作红色链状连接器 要求是链条应该延伸到块被拖动的地方 请提供任何教程 学习材料的指示 谢谢 有许多 Jquery 插件可用于创建数据库可视化或流程图的连接
  • Soundcloud自定义播放器动态添加和播放歌曲

    我在用soundcloud自定义播放器 https github com soundcloud soundcloud custom player创建一个可以播放所有歌曲的播放器 我的网站 当我只放置任何曲目或帖子的静态网址时 这效果非常好
  • Google Analytics 是否具有针对长时间运行的网络应用程序的“心跳”功能?

    我正在制作一个专注于观看嵌入内容的网络应用程序 我希望应用程序客户端向 GA Google Analytics 发送 心跳 类型的信号以保持会话继续进行 现在看来 如果访问者观看视频 5 10 分钟 GA 就会假设他已经离开页面 并将用户的
  • 使用 html2canvas 将 highcharts 图表渲染为 pdf 在 IE 和 Firefox 上不起作用

    我们使用 html2canvas js 和 html2canvas svg js 版本 0 5 0 beta1 以及 highcharts js 将圆环图下载为 pdf 这在 Chrome 中按预期工作 但在 IE 和 Firefox 中不
  • 在没有事件的情况下从 HTML 执行 javascript 函数

    我希望从 HTML 页面调用 javascript 函数 并且我do not希望它依赖于任何事件 该函数位于单独的 js 文件中 因为我希望在许多网页中使用它 我也将变量传递给它 我试过这个 HTML fp footer2 js中的函数 f
  • 如何使用 Material UI 制作一个圆形复选框?

    我尝试匹配的设计要求复选框为圆形 我正在使用 Material UI 和 React 边框半径不起作用 因为实际图标的边框不是可见复选框的边框 我不能只使用像 Font Awesome 这样的东西 因为它需要实际检查和取消检查 Curren
  • 字符串编码器固定大小输出

    我接到一个任务 需要编写一个具有以下要求的编码器 输入 1 到 8 位的整数 即 12345678 2352 76543 输出 固定大小的 6 位代码 可以包含任何字母数字和符号 a z A Z 0 9 该操作必须是可逆的 因此给定一个代码
  • 客户端上传并读取文件,角度为2

    我需要用户的日志文件 以便我可以读取和分析这些文件 例如某种放置区域 用户放置一个文件 然后我可以用javascript读取它 我使用 Angular2 rc5 我有 node js 在后台运行 但我不需要那里的数据 我只需要在客户端 是否
  • 弹出窗口显示来自 php 和 javascript 的结果

    我正在尝试实现 javascript 来显示 php 的结果 基本上 我有一个登录页面 对于登录失败 我希望结果显示在弹出窗口中 而不是仅仅用 php 回显它们 我尝试实现警报框 但看起来我错过了一些东西 成功登录将被重定向到logged
  • canvas:如何在一个变换语句中完成平移、倾斜、旋转...?

    最近几天我在学习 变换 现在我知道如何通过变换的矩阵进行平移 旋转 倾斜 缩放 但如果我想在一个转换语句中执行上述所有操作 我该怎么办 ctx transform a b c d e f 当我们想要通过变换旋转某些东西时 我们必须为每个参数
  • 使用 var 与 let/const 进行块级变量重新声明

    Part 1 给出这个例子 var number 10 var number 42 console log number 42 为什么第 4 行不抛出Uncaught SyntaxError Identifier number has al
  • webpack 5 中是否可以让不同的入口包到不同的输出路径

    我正在使用 webpack 打包 google chrome 扩展 我想将文件夹结构保留在 dist 文件夹中 例如 我想将所有弹出资源打包在dist popup 这是我现在的配置 const path require path const
  • JavaScript:字符串连接性能低下? Array.join('')?

    我读过如果我有一个for循环 我不应该使用字符串连接 因为它很慢 例如 for i 0 i lt 10000000 i str a 相反 我应该使用Array join 因为它更快 var tmp for i 0 i lt 10000000
  • 找到两个移动物体的更好交点

    我想极大地优化我的算法之一 我将尽力以最好的方式解释它 主题 我们当时处于二维欧几里德系统中t 0 在这个系统中有两个对象 O1 and O2 O1 and O2分别位于点PA and PC O1移动于常数和已知点方向的速度PB 当物体到达
  • jQuery Deferred - 向 Deferred 合约添加回调

    我正在尝试在现有 Deferred 的状态设置为成功之前向其合约添加另一个异步调用 不要尝试用英语解释这一点 请参阅以下伪代码 when ajax url someUrl data data async true success funct
  • 如何在 PHP、HTML 表单和 Javascript 之间传递布尔值

    我有一个 PHP 程序 它使用 HTML 表单并使用 JavaScript 进行验证 HTML 表单中有一个隐藏字段 其中包含一个布尔值 该值由 PHP 设置 由 JavaScript 在提交时进行验证 然后传递到另一个 PHP 页面 当我
  • 从 BLOB 打印 PDF

    我从外部 API 获取 PDF 文件 使用此代码我可以正确下载该文件 var req new XMLHttpRequest req open POST url true req responseType blob req setReques
  • Selenium - 运行 javascript

    我有一个愚蠢的问题 如何运行位于测试站点上的脚本 我可以运行警报 但我无权访问我编写的脚本 我尝试过 runscript geteval 没有任何效果 由于 Selenium 是用 JavaScript 编写的 因此 window 对象会移
  • 关闭网站的 IE 8 兼容模式

    我的公司使用IE8作为默认浏览器 并且默认为所有内联网站点设置兼容模式 我正在构建一个在关闭兼容模式时可以工作的 Intranet 站点 我正在使用 Reset css 和几个开源 JavaScript 程序 例如数据表 我想做的是强制关闭

随机推荐

  • 在 Android Studio MacOS 中清理项目时出现“ninja”错误

    我在 macos mojave 中使用 Android Studio 3 5 我有一个项目 在一个文件夹中包含 java 和 ndk 代码 我们称之为 project folder A 我复制了这个文件夹 将其重命名为 project fo
  • 将脚本库应用于时间轴

    这是我之前问题的后续 如果这个问题太复杂而无法在这里回答 我深表歉意 我试图能够在时间线视图中显示我的数据 我在这里找到了谷歌的时间线脚本 https developers google com chart interactive docs
  • 检查lua中是否存在目录?

    如何检查 lua 中是否存在目录 如果可能的话最好不使用 LuaFileSystem 模块 尝试做类似以下 python 行的事情 os path isdir path 这是一种在 Unix 和 Windows 上都适用的方式 无需任何外部
  • 从字符串中删除转义序列 '\' 以将其转换为 XmlDocument

    我有一个返回 struct 对象的 Web 服务 因此我得到以下 XML 字符串形式的响应 现在我需要将其加载到 XmlDocument 对象中 但如何删除字符串中的转义序列 每个 的 都会导致错误
  • AVPlayer - UILabel 在视频上不可见

    NSString urlPath NSURL videoUrl urlPath NSBundle mainBundle pathForResource fogLoop ofType mp4 videoUrl NSURL fileURLWit
  • Firebase 聚合属性值,无需获取所有相关文档

    我有以下 firebase 结构 company1 name Company One invoices invoice1 amount 300 currency EUR timestamp 1572608088 invoice2 amoun
  • 子类化 UICollectionViewCell 导致永远不会被选择

    我尝试对 UICollectionViewCell 进行子类化并从 nib 文件加载 id initWithFrame CGRect frame self super initWithFrame frame if self NSArray
  • 将 WebGL 应用程序部署为本机 iOS 或 Android 应用程序?

    有谁知道如何将 WebGL 应用程序部署为本机 iOS 或 Android 应用程序 商业中间件是可以接受的 但开放项目会更好 谢谢 作为 Joris 答案的延伸 这似乎是基于内森 德弗里斯的作品 http atnan com blog 2
  • 使用破折号显示 URL slug 时出现问题

    我为我的故事 URL 创建了一个带有破折号的 slug 例如 使用 slug 而不是 ID 来获取记录 https stackoverflow com questions 482636 fetching records with slug
  • 视频文件中的感兴趣区域

    这是我第一次在这里发帖 希望能得到积极的结果 因为我的研究已接近尾声 我想在我的代码中添加一个函数 该函数将仅处理视频文件的定义的感兴趣区域 我无法发布图片 因为我还没有声誉 但这里发布了同样的问题 gt http answers open
  • OpenCV的calcOpticalFlowPyrLK抛出异常

    一段时间以来 我一直在尝试使用 OpenCV 构建一个小型光流示例 除了函数调用 calcOpticalFlowPyrLK 之外 一切正常 该函数在控制台窗口中打印以下失败的断言 OpenCV错误 断言失败 mytype typ0 CV M
  • 将文本单词换行

    我使用下面的代码来包装长文本 由用户在文本区域中输入以进行评论 function addNewlines comments var result while trim comments length gt 0 result comments
  • 拖动并 connectToSortable 到 iframe 内的可排序 DIV 中

    我试图将一个元素从主页拖动到其中的 iframe 并在框架内使用可排序的 div 我能够使 div 可排序 并将可拖动的内容连接到可排序的内容 但元素放置的位置计算错误并在错误的位置排序 可能是因为iframe内的鼠标坐标与主页的位置不同
  • 数据列表验证中 Obj.length>0 错误

    我有一个脚本 我通过 tempmankey 在网站上运行它 该脚本基本上是在输入字段中插入数据列表 并根据数据列表选择的值更改其他输入值 code function bdi contains Truck No closest div nex
  • 如何检测Vista UAC是否启用?

    我需要我的应用程序根据是否启用 Vista UAC 来表现不同 我的应用程序如何检测用户计算机上的 UAC 状态 该注册表项应该告诉您 HKLM SOFTWARE Microsoft Windows CurrentVersion Polic
  • 定制 iPhone 键盘

    我需要 即客户要求 提供自定义键盘 供用户在文本字段和区域中输入文本 我已经有一些可以执行键盘操作并将测试附加到文本字段的东西 但是我想让它更通用并让它像标准的 iphone 键盘一样工作 即当用户选择可编辑文本控件时出现 目前我的控制器知
  • 使用 BrokeredMessage 从 Azure 服务总线队列 (v1) 反序列化强类型对象

    无论出于何种原因 我似乎无法弄清楚如何将我的对象从队列中取出并将其反序列化回它放入其中的内容 An账户事件DTO Azure函数成功将对象放入队列 FunctionName AccountCreatedHook public static
  • 从groupby中的列获取模式[重复]

    这个问题在这里已经有答案了 我试图获取 groupby 对象中列的模式 但出现此错误 incompatible index of inserted column with frame index 这是我遇到的问题 我不知道如何解决它 任何帮
  • 哪个类应该存储查找表? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 世界上有不同地点的代理 但任何地点都只有一个代理 每个特工都知道他在哪里 但我还需要快速检查给定位置是否有特工 因此 我还维护了一张从位置到代理
  • 对角度数据表中括号内的数字进行排序

    我在用角度数据表 http l lin github io angular datatables 根据网络服务响应填充我的表 我的网络服务返回一个如下所示的 json id 1 name abc count 20 id 2 name abc