在Datatable AngularJs中添加自定义过滤器

时间:2017-04-26 14:26:17

标签: jquery angularjs datatable datatables

我有一个datatable来显示来自网络服务电话的数据。现在作为一个由多个复选框组成的过滤器,我想根据选中的复选框过滤数据表记录。

这些复选框中的所有值都保留在列内的数据表中。

这是一张图片,显示了我正在寻找的内容 -

enter image description here

(请忽略图片中的蓝色矩形)

图像具有Clinic列,其值可以是clinic1,clinic2等。

因此,当我选择任何复选框时,它应该只显示诊所记录。

以下是制作数据表的代码: -

$scope.options = {
  "bServerSide": false,
  "sAjaxSource": WEB_URL
  "sServerMethod": "POST",
  aaSorting: [
      [1, 'desc']
  ],
  aoColumns: [{
          mData: 'id'
      },
      {
          mData: 'payment_date'
      },
      {
          mData: 'transaction_id'
      },
      {
          mData: 'Appointment'
      }

  ],
  "aoColumnDefs": [{
          "aTargets": [0],
          "mData": 0,
          "mRender": function(data, type, full) {
              var ids = data;
              var date = full.date;
              if (typeof(data) !== "undefined") {
                  username1 = '<label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label>';
              }


              return username1;
          }
      },
      {
          "aTargets": [1],
          "mData": 1,
          "mRender": function(data, type, full) {
              var paydate = '';
              if (typeof(data) !== "undefined") {
                  paydate = moment(data).format('LL h:mm:ss a');
              }
              return paydate;
          }
      },
      {
          "aTargets": [2],
          "mData": 2,
          "mRender": function(data, type, full) {
              var clinic_name = '';
              if (typeof(data) !== "undefined") {
                  clinic_name = data;
              }
              return clinic_name;
          }
      },

      {
          "aTargets": [3],
          "mData": 3,
          "mRender": function(data, type, full) {
              var uname = '';
              if (typeof(data) !== "undefined") {
                  uname = data.Patient.name;
              }
              return uname;
          }
      }

  ],

  };

和html文件: -

<table table ui-jq="dataTable" ui-options="options" class="table table-striped b-t b-b table table-borderd"
id="userUploadTable">
  <thead>
    <tr>
      <th>
      </th>
      <th>Date</th>
      <th>clinic</th>
      <th>email</th>
      <th>phone</th>
    </tr>
  </thead>
<tbody>
<tr>
</tr>
</tbody>
</table>

0 个答案:

没有答案
相关问题