Javascript 尝试将三个HTML页面中的三个数据表合并到一个页面_Javascript_Python_Sql Server_Flask_Datatables

Javascript 尝试将三个HTML页面中的三个数据表合并到一个页面

javascript python sql-server flask datatables

Javascript 尝试将三个HTML页面中的三个数据表合并到一个页面,javascript,python,sql-server,flask,datatables,Javascript,Python,Sql Server,Flask,Datatables,我正在开发一个webapp，它将为我雇主的仓库释放昂贵的许可证仓库工作人员可以看到谁被分配到订单（表1）、订单上有哪些库存项目（表2）以及库存项目在哪里（表3）。单击表1上的“参考号”时，将在新选项卡上打开表2。单击表2上的“库存项目”名称时，将在新选项卡上打开表3。它们都在给定的选项卡上完美渲染这三个表中的数据通过Python来自SQL Server。表1来自视图，表2和表3来自存储过程。我将数据表用于表本身下面是app.py文件中三个表的python脚本 @/app.route('/p

我正在开发一个webapp，它将为我雇主的仓库释放昂贵的许可证

仓库工作人员可以看到谁被分配到订单（表1）、订单上有哪些库存项目（表2）以及库存项目在哪里（表3）。单击表1上的“参考号”时，将在新选项卡上打开表2。单击表2上的“库存项目”名称时，将在新选项卡上打开表3。它们都在给定的选项卡上完美渲染

这三个表中的数据通过Python来自SQL Server。表1来自视图，表2和表3来自存储过程。我将数据表用于表本身

下面是app.py文件中三个表的python脚本

@/app.route('/pick-info', methods=['GET'])
@/login_required
def picks():
   cursor = cnxn.cursor()
   cursor.execute(select_picks)
   data = cursor.fetchall()
   return render_template('picks.html', data=data)


@/app.route('/pick-info/<int:PickRefNo>')
@/login_required
def picks_line(PickRefNo):
   cursor = cnxn.cursor()
   cursor.execute(pick_lines, (PickRefNo,))
   pick_data = cursor.fetchall()
   return render_template('picklines.html', pick_data=pick_data)


@/app.route('/pick-location/<int:StockItemRefNo>')
@/login_required
def pick_location(StockItemRefNo):
   cursor = cnxn.cursor()
   cursor.execute(pick_locations, (StockItemRefNo,))
   location_data = cursor.fetchall()
   return render_template('picklocations.html', location_data=location_data)

@/app.route（'/pick info'，methods=['GET']）
@/需要登录
def picks（）：
cursor=cnxn.cursor（）
cursor.execute（选择\u拾取）
data=cursor.fetchall（）
返回渲染模板（'picks.html'，data=data）
@/app.route（“/pick info/”）
@/需要登录
def分拣_线（分拣参考编号）：
cursor=cnxn.cursor（）
cursor.execute（pick_行，（PickRefNo，））
pick_data=cursor.fetchall（）
返回渲染模板（'picklines.html'，pick\u data=pick\u data）
@/app.route（“/pick location/”）
@/需要登录
def拾取位置（库存项目参考号）：
cursor=cnxn.cursor（）
cursor.execute（拾取位置，（StockItemRefNo，））
location\u data=cursor.fetchall（）
返回渲染模板（'picklocations.html'，location\u data=location\u data）

我尝试将这三个页面与下面的HTML文件合并为一个页面

<div class="row">
    <div class="pick-table po-table">
           <table id="pickexample" class="display table-responsive>
               <thead>
                  <tr style="text-align: center;">
                      <th>
                      </th>
                      <th scope="col" class="">
                           <button type="button" class="btn">
                              RefNo
                           </button>
                      </th>
                      <th scope="col" class="">
                           <button type="button" class="btn">
                              <i class="fas fa-file-alt"></i>
                           </button>
                      </th>
                      <th scope="col" style="text-align: center; font-size: 10px;">
                            <button type="button" class="btn">
                               A/C
                            </button>
                      </th>
                      <th scope="col">
                            <button type="button" class="btn">
                               Due
                            </button>
                      </th>                               
                  </tr>
               </thead>
               <tbody>
                  {% for value in data %}
                   <tr class="pick" style="text-align: center;">
                       <td class="details-control"></td>
                       <td><a class="text-white" href="{{url_for('picks_line',  PickRefNo = value[0])}}" target="_blank"><i class="fas fa-info-circle"></i></a>{{ value[0] }}</td>
                       <td>{{ value[2] }}</td>
                       <td>{{ value[5] }}</td>
                       <td>{{ value[4] }}</td>                                
                   </tr>
                   {% endfor %}
               </tbody>
         </table>
    </div>
</div>
<div class="row" style="margin-top: 15px; height: 40vh;">
    <div class="col-sm-8">
         <table id="picklines" class="display table-responsive table">
               <thead>
                   <tr style="text-align: center;">
                      <th>
                      </th>
                      <th scope="col" class="">
                          <button type="button" class="btn">
                              Stock Item
                          </button>
                       </th>
                       <th scope="col" style="text-align: center; font-size: 10px;">
                          <button type="button" class="btn">
                              Name
                           </button>
                       </th>
                        <th scope="col">
                           <button type="button" class="btn">
                              Pick Qty
                           </button>
                        </th>
                        <th scope="col">
                           <button type="button" class="btn">
                                Picked Qty
                           </button>
                        </th>
                        <th scope="col">
                           <button type="button" class="btn">
                                To Be Picked
                            </button>
                        </th>
                        <th scope="col">
                            <button type="button">
                                 Weight
                             </button>
                         </th>
                    </tr>
             </thead>
              <tbody>
                 {% for value in pick_data %}
                 <tr class="pick" style="text-align: center;">
                     <td><a class="black-text" href="{{url_for('pick_location',  StockItemRefNo = value[2])}}" target="_blank"><i class="fas fa-2x fa-info-circle"></i></a></td>
                     <td>{{ value[2] }}</td>
                     <td>{{ value[17] }}</td>
                     <td>{{ value[3] }}</td>
                     <td>{{ value[4] }}</td>
                     <td>{{ value[15] }}</td>
                     <td>{{ value[11] }}</td>
                 </tr>
                {% endfor %}
             </tbody>
         </table>
      </div>

      <div class="col-sm-4">
          <table id="picklocation" class="display table-responsive">
              <thead>
                  <tr style="text-align: center;">
                      <th scope="col" class="">
                         <button type="button" class="btn">
                           Zone
                         </button>
                      </th>
                      <th scope="col" style="text-align: center; font-size: 10px;">
                           <button type="button" class="btn">
                               Bin
                           </button>
                       </th>
                       <th scope="col">
                           <button type="button" class="btn">
                               Quantities
                            </button>
                       </th>
                       <th scope="col">
                           <button type="button" class="btn">
                              Pallet Number
                           </button>
                       </th>
                    </tr>
                </thead>
                <tbody>
                    {% for value in data %}
                      <tr class="pick" style="text-align: center;">
                         <td>{{ value[0] }}</td>
                         <td>{{ value[1] }}</td>
                         <td>{{ value[2] }}</td>
                         <td>{{ value[3] }}</td>
                      </tr>
                    {% endfor %}
                </tbody>
            </table>
         </div>
     </div>


只需使用PickRefNo和StockItemRefNo作为路由变量，为所有表创建一个路由，如下所示：
@/app.route('/pick-info/<int:PickRefNo>/<int:StockItemRefNo>', methods=['GET'])
@/login_required
def picks(PickRefNo, StockItemRefNo):
   cursor = cnxn.cursor()
   data=cursor.execute(select_picks).fetchall()   
   pick_data = cursor.execute(pick_lines, (PickRefNo,)).fetchall()
   location_data=cursor.execute(pick_locations, (StockItemRefNo,)).fetchall()
return render_template('picks.html', data=data, pick_data=pick_data, location_data=location_data)

@/app.route（'/pick info/'，methods=['GET']）
@/需要登录
def拾取（PickRefNo、StockItemRefNo）：
cursor=cnxn.cursor（）
data=cursor.execute（select_picks）.fetchall（）
pick_data=cursor.execute（pick_行，（PickRefNo，）.fetchall（）
location\u data=cursor.execute（pick\u locations，（StockItemRefNo，）.fetchall（）
返回渲染模板（'picks.html'，data=data，pick\u data=pick\u data，location\u data=location\u data）

并在picks.html中添加所有三个表，只需为所有表创建一个路由，使用PickRefNo和StockItemRefNo作为路由变量，如下所示：
@/app.route('/pick-info/<int:PickRefNo>/<int:StockItemRefNo>', methods=['GET'])
@/login_required
def picks(PickRefNo, StockItemRefNo):
   cursor = cnxn.cursor()
   data=cursor.execute(select_picks).fetchall()   
   pick_data = cursor.execute(pick_lines, (PickRefNo,)).fetchall()
   location_data=cursor.execute(pick_locations, (StockItemRefNo,)).fetchall()
return render_template('picks.html', data=data, pick_data=pick_data, location_data=location_data)

@/app.route（'/pick info/'，methods=['GET']）
@/需要登录
def拾取（PickRefNo、StockItemRefNo）：
cursor=cnxn.cursor（）
data=cursor.execute（select_picks）.fetchall（）
pick_data=cursor.execute（pick_行，（PickRefNo，）.fetchall（）
location\u data=cursor.execute（pick\u locations，（StockItemRefNo，）.fetchall（）
返回渲染模板（'picks.html'，data=data，pick\u data=pick\u data，location\u data=location\u data）

并在picks.html中添加所有三个表
谢谢@IoaTzimas-这帮了大忙！我取得了一些进展。我收到以下错误-无法为值为['StockItemRefNo']的端点'pickslines\u and Locations'生成url。您是否忘记在应打开表3的第二个表的href中指定值['PickRefNo']。如果我注释掉href，页面将按预期加载。您必须根据路由结构调整任何URL（有2个变量。你的3个表都加载到html文件中了吗？我将在问题的底部添加一个编辑，向你展示它现在的样子。感谢@IoaTzimas-这是一个巨大的帮助！我已经取得了一些进展。我得到了以下错误-无法使用值['StockItemRefNo'为端点'pickslines\u和Locations'构建url）。您是否忘记在应打开表3的第二个表上的href中指定值['PickRefNo']。如果我注释掉该href，页面将按预期加载。您必须根据路由结构调整任何URL（有2个变量。您的3个表都加载到html文件中了吗？我将在问题的底部添加一个编辑，向您展示它现在的样子。