时间戳

首页 > 解决方案 > 无法运行 2 个 jquery 脚本。如果分页有效，则过滤器无效，反之亦然

jquery - 无法运行 2 个 jquery 脚本。如果分页有效，则过滤器无效，反之亦然

问题描述

一起调用时JQuery不起作用

下面的代码没有显示任何错误但不起作用。

我面临以下问题

1 到 10 的数据显示在页码为 1 的表格中，但单击下一步按钮会将页码更改为 2，但不显示下一个 10 到 20 的数据。

我尝试了 JQuery Noconflict 但它没有用。

如果我更改 Javascript 的格式，它将停止工作。

$(function() {
  $('#dg').datagrid({
    view: detailview,
    detailFormatter: function(index, row) {
      return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
    },
    onExpandRow: function(index, row) {
      $('#ddv-' + index).datagrid({
        url: 'https://www.ntf.mlohia.in/taka_deliver_getdetail.php?chall_no=' + row.chall_no,
        fitColumns: true,
        singleSelect: true,
        rownumbers: true,
        loadMsg: '',
        height: 'auto',
        columns: [
          [{
              field: 'sr_no',
              title: 'Sr No',
              width: 200
            },
            {
              field: 'meter',
              title: 'Meter',
              width: 100,
              align: 'right'
            },
            {
              field: 'color',
              title: 'Color',
              width: 100,
              align: 'right'
            }
          ]
        ],
        onResize: function() {
          $('#dg').datagrid('fixDetailRowHeight', index);
        },
        onLoadSuccess: function() {
          setTimeout(function() {
            $('#dg').datagrid('fixDetailRowHeight', index);
          }, 0);
        }
      });
      $('#dg').datagrid('fixDetailRowHeight', index);
    }
  });
});


$(function() {
  var dg = $('#dg').datagrid();

  dg.datagrid('enableFilter');

});
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.ntf.mlohia.in/css/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">

<body>
  <table id="dg" style="width:90%;margin-left:5%;height:420px !important;" url="http://ntf.mlohia.in/taka_deliver_getdata.php" title="Taga Delivered" toolbar="#toolbar" pagination="true" rownumbers="true" singleSelect="true" fitColumns="true">
    <thead>
      <tr>
        <th field="chall_no" width="6%" align="center" sortable="true">Chall No</th>
        <th field="party_name" width="22%" align="center" sortable="true">Party Name</th>
        <th field="po_no" width="5%" align="center" sortable="true">Po No</th>
        <th field="date" width="7%" align="center" sortable="true">Date</th>
        <th field="dyeing" width="17%" align="center" sortable="true">Dyeing</th>
        <th field="transport" width="17%" align="center" sortable="true">Tansport</th>
        <th field="design_name" width="9%" align="center" sortable="true">Design Name</th>
        <th field="total_meter" width="6%" align="center" sortable="true">Total Meter</th>
        <th field="rate" width="4%" align="center" sortable="true">Rate</th>
      </tr>
    </thead>
  </table>
</body>

标签： jqueryjquery-ui

解决方案

您需要更多脚本

我添加了<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>

$(function() {
  $('#dg').datagrid({
    view: detailview,
    detailFormatter: function(index, row) {
      return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
    },
    onExpandRow: function(index, row) {
      $('#ddv-' + index).datagrid({
        url: 'taka_deliver_getdetail.php?chall_no=' + row.chall_no,
        fitColumns: true,
        singleSelect: true,
        rownumbers: true,
        loadMsg: '',
        height: 'auto',
        columns: [
          [{
              field: 'sr_no',
              title: 'Sr No',
              width: 200
            },
            {
              field: 'meter',
              title: 'Meter',
              width: 100,
              align: 'right'
            },
            {
              field: 'color',
              title: 'Color',
              width: 100,
              align: 'right'
            }
          ]
        ],
        onResize: function() {
          $('#dg').datagrid('fixDetailRowHeight', index);
        },
        onLoadSuccess: function() {
          setTimeout(function() {
            $('#dg').datagrid('fixDetailRowHeight', index);
          }, 0);
        }
      });
      $('#dg').datagrid('fixDetailRowHeight', index);
    }
  });
});


$(function() {
  var dg = $('#dg').datagrid();

  dg.datagrid('enableFilter');

});
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-filter.js"></script>


<table id="dg" style="width:90%;margin-left:5%;height:420px !important;" url="taka_deliver_getdata.php" title="Taga Delivered" toolbar="#toolbar" pagination="true" rownumbers="true" singleSelect="true" fitColumns="true">
  <thead>
    <tr>
      <th field="chall_no" width="6%" align="center" sortable="true">Chall No</th>
      <th field="party_name" width="22%" align="center" sortable="true">Party Name</th>
      <th field="po_no" width="5%" align="center" sortable="true">Po No</th>
      <th field="date" width="7%" align="center" sortable="true">Date</th>
      <th field="dyeing" width="17%" align="center" sortable="true">Dyeing</th>
      <th field="transport" width="17%" align="center" sortable="true">Tansport</th>
      <th field="design_name" width="9%" align="center" sortable="true">Design Name</th>
      <th field="total_meter" width="6%" align="center" sortable="true">Total Meter</th>
      <th field="rate" width="4%" align="center" sortable="true">Rate</th>
    </tr>
  </thead>
</table>

推荐阅读