php と tablesorterを使いテーブルソート

映画の価格をスクレイピングで取得し、結果をSQLiteからHTMLのテーブルに出力し、価格でソートできるようにしようとしています。
JSの「tablesorter」を使いソート機能を付けたいのですがうまくいきません

head部

php
1<head>
2    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
3    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
4    <script src="jquery.tablesorter.min.js"></script>
5</head>
6コード

body部

php
1
2<body>
3<table class="table table-striped tablesorter"　id="result-table">
4    <thead>
5        <tr>
6            <th class="title_head table_head" style="width: 55%">作品名</th>
7            <th class="performer_head table_head" style="width: 20%">出演者</th>
8            <th class="price_head table_head" style="width: 10%">価格</th>
9            <th class="price_head table_head" style="width: 15%;">ジャケット</th>
10        </tr>
11    </thead>
12<tbody>
13<?php foreach ($result as $res) : ?>

body部終了手前

php
1<script type="text/javascript">
2        $(function(){
3            $('#result-table').tablesorter({
4            headers: {
5                0: { sorter: false}, /// => タイトル
6                1: { sorter: false}, /// => 出演者
7                2: { sorter: "digit"}, /// => 価格でソート
8                3: { sorter: false} /// => 画像
9            }
10            });
11        });
12</script>
13

テストとして同階層にhtmlファイルを作成し簡単なテーブルを作ったときはうまくいきました。
うまく行かないのにはどういうことが考えられるのでしょうか？
アドバイスお願いします

追記
生成されたHTMLです
カラム数を減らしてみましたがうまくいきませんでした

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="../vendor/twbs/bootstrap/dist/css/bootstrap.css">
7
8    <!-- テーブルソート -->
9    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
10    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11    <script src="jquery.tablesorter.min.js"></script>
12    <link rel="stylesheet" href="theme.default.min.css">
13
14    <title>DMMのセール情報を検索！</title>
15</head>
16
17<body>
18    <nav class="navbar navbar-light bg-light p-3 d-flex justify-content-between"
19        style="position: -webkit-sticky; position: sticky; top: 0;">
20        <a class="navbar-brand" href="/searching/public/index.php" style="font-size: 2rem">DMM search</a>
21        
22        <!-- <form action="/result.html" class="text-center" method="post">-->
23        <form action="/searching/public/result.php" class="text-center" method="post">
24            <div class="form-group my-2">
25                <input type="text" name="search" class="mt-3" placeholder="テキスト">
26            　　 <input type="submit" class="btn btn-outline-success btn-sm" value="検索">
27            </div>
28        </form>
29    </nav>
30
31        <!-- レス、マッチするものがない時 -->
32                    <div class="announcement container text-center">
33                <p style="font-size: 0.8;">※「作品名」をクリックすると、DMMの商品ページに<span style="color: #ff4500;">移動</span>します</p>
34                <p style="font-size: 0.8;">※「出演者」をクリックすると、出演者名で再検索を行います</p>
35            </div>
36
37            <div class="result_good container">
38            <table class="table table-striped tablesorter"　id="result-table">
39            <thead>
40                <tr>
41                    <th class="title_head table_head" style="width: 55%">作品名</th>
42                    <th class="performer_head table_head" style="width: 20%">出演者</th>
43                    <th class="price_head table_head" style="width: 10%">価格</th>
44                    <th class="price_head table_head" style="width: 15%;">ジャケット</th>
45                </tr>
46            </thead>
47            <tbody>
48
49            <!-- 「レス」の連想配列に対しループを回す -->
50                                <tr class="item">
51                        <td class="title table_row">
52                            <!-- noopener 未対応ブラウザ用に noreferrer も指定 -->
53                            <a href="https://www.dmm.com" target="_blank" rel="noopener noreferrer"><font color="#07519a">title</font></a>
54                        </td>
55                        <td class="performer table_row">
56                            <!-- 出演者が判明している時 -->
57                                     
58                                <a href=/searching/public/result.php?name=performer><font color="#07519a">performer</font></a>                                                                              
59                            <!-- 出演者が不明の時 -->
60                                                    </td>
61                        <td class="price table_row">200 円〜</td>
62                        <td><img src="https://pics.dmm.com/abc.jpg" style='margin: 3px 5px; padding: 1px 3px;'></td>                        
63                        </tbody>
64            </table>
65            </div>
66        
67    <!-- location.href='/' は aタグ以外での画面遷移 -->
68    <div class="return_home container">
69        <button type=“button” class="btn btn-outline-primary btn-lg mx-auto d-block"
70                onclick="location.href='/searching/public/index.php'">ホームに戻る</button>
71    </div>
72    
73
74    <script type="text/javascript">
75        $(function(){
76            $('#result-table').tablesorter({
77            headers: {
78                0: { sorter: false}, /// => タイトル
79                1: { sorter: false}, /// => 出演者
80                2: { sorter: "digit"}, /// => 価格でソート
81                3: { sorter: false} /// => 画像
82            }
83            });
84        });
85    </script>
86
87</body>
88</html>

crazyBaseball

2021/10/23 22:13

PHPで生成されるHTMLをご提示いただけますでしょうか。PHPとtablesorterには関係がありませんので、PHPで生成されるHTMLがtablesorterにとって不都合な構造になっているのだと思います。ちなみにご存じの上で省略されたのだと思いますが、<?php foreach ($result as $res) : ?> はPHPとしてなりたっていません。