{"id":33,"date":"2023-12-02T22:51:37","date_gmt":"2023-12-02T14:51:37","guid":{"rendered":"https:\/\/www.xhome.club\/?p=33"},"modified":"2023-12-02T22:51:37","modified_gmt":"2023-12-02T14:51:37","slug":"datatables-%e8%a1%8c%e5%86%85%e7%bc%96%e8%be%91%ef%bc%8c%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e7%9a%84%e5%bd%93%e5%89%8d%e5%8d%95%e5%85%83%e6%a0%bc","status":"publish","type":"post","link":"https:\/\/www.xhome.club\/index.php\/2023\/12\/02\/datatables-%e8%a1%8c%e5%86%85%e7%bc%96%e8%be%91%ef%bc%8c%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e7%9a%84%e5%bd%93%e5%89%8d%e5%8d%95%e5%85%83%e6%a0%bc\/","title":{"rendered":"Datatables \u884c\u5185\u7f16\u8f91\uff0c\u83b7\u53d6\u9f20\u6807\u70b9\u51fb\u7684\u5f53\u524d\u5355\u5143\u683c"},"content":{"rendered":"<p>Datatables \u884c\u5185\u7f16\u8f91\uff0c\u83b7\u53d6\u9f20\u6807\u70b9\u51fb\u7684\u5f53\u524d\u5355\u5143\u683c<br \/>\n\u9996\u5148\u9700\u8981\u5f15\u5165,\u91cd\u70b9\u5728 columnDefs\uff1a<\/p>\n<p class=\"line-numbers language-xml\"><code class=\" language-xml\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/cdn.datatables.net\/1.10.15\/css\/jquery.dataTables.min.css<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/p>\n<p class=\"line-numbers language-xml\"><code class=\" language-xml\"><br \/>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.min.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/p>\n<p>html\u4ee3\u7801\uff1a<\/p>\n<p><code class=\" language-xml\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>table <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>editable<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>table<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/p>\n<p>js\u4ee3\u7801\uff1a<\/p>\n<pre class=\"line-numbers language-kotlin\"><code class=\" language-kotlin\">   <span class=\"token keyword\">var<\/span> oTable<span class=\"token punctuation\">;<\/span>\r\n    oTable <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token string\">'#editable'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">DataTable<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\r\n            ajax<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\r\n                url<span class=\"token operator\">:<\/span> <span class=\"token string\">\"\/keyword\/keywordAjax\"<\/span><span class=\"token punctuation\">,<\/span>\r\n                type<span class=\"token operator\">:<\/span> <span class=\"token string\">\"post\"<\/span><span class=\"token punctuation\">,<\/span>\r\n                <span class=\"token keyword\">data<\/span><span class=\"token operator\">:<\/span> <span class=\"token function\">function<\/span> <span class=\"token punctuation\">(<\/span>d<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                  <span class=\"token comment\">\/\/d \u662f\u539f\u59cb\u7684\u53d1\u9001\u7ed9\u670d\u52a1\u5668\u7684\u6570\u636e\uff0c\u9ed8\u8ba4\u5f88\u957f\uff0c\u8fd9\u91cc\u662f\u6211\u81ea\u5df1\u5c01\u88c5\u8fc7\u7684\uff0c\u4f60\u4f7f\u7528\u81ea\u5df1\u7684\u65b9\u5f0f\u4f20\u8f93data\u5c31\u53ef\u4ee5\u4e86\u3002<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n            searching<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><span class=\"token comment\">\/\/\u5173\u95ed\u641c\u7d22\u6846<\/span>\r\n            serverSide<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><span class=\"token comment\">\/\/\u670d\u52a1\u5668\u5206\u9875<\/span>\r\n            processing<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            paging<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            bSort<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            ordering<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            autoWidth<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            scrollCollapse<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span>\r\n            stateSave<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><span class=\"token comment\">\/\/\u5f00\u542f\u8bb0\u5f55\u4e0a\u6b21\u7ffb\u9875<\/span>\r\n            info<span class=\"token operator\">:<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span>\r\n            createdRow<span class=\"token operator\">:<\/span> <span class=\"token function\">function<\/span> <span class=\"token punctuation\">(<\/span>row<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">data<\/span><span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token comment\">\/* \u8bbe\u7f6e\u8868\u683c\u4e2d\u7684\u5185\u5bb9\u5c45\u4e2d *\/<\/span>\r\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string\">'td'<\/span><span class=\"token punctuation\">,<\/span> row<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">attr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"class\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"text-center\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                $<span class=\"token punctuation\">(<\/span><span class=\"token string\">'th'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">attr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"class\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"text-center\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n            columns<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>\r\n                <span class=\"token punctuation\">{<\/span>\r\n                    title<span class=\"token operator\">:<\/span> <span class=\"token string\">\"ID\"<\/span><span class=\"token punctuation\">,<\/span>\r\n                    <span class=\"token keyword\">data<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">\"id\"<\/span>\r\n                <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">,<\/span><span class=\"token punctuation\">{<\/span>\r\n                    title<span class=\"token operator\">:<\/span><span class=\"token string\">\"\u4e2d\u6587\u540d\u79f0\"<\/span><span class=\"token punctuation\">,<\/span>\r\n                    <span class=\"token keyword\">data<\/span><span class=\"token operator\">:<\/span><span class=\"token string\">\"displayvaluezh\"<\/span>\r\n                <span class=\"token punctuation\">}<\/span> <span class=\"token punctuation\">,<\/span><span class=\"token punctuation\">{<\/span>\r\n                    title<span class=\"token operator\">:<\/span><span class=\"token string\">\"\u64cd\u4f5c\u5217\"<\/span><span class=\"token punctuation\">,<\/span>\r\n                    render<span class=\"token operator\">:<\/span><span class=\"token function\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">data<\/span><span class=\"token punctuation\">,<\/span>type<span class=\"token punctuation\">,<\/span>full<span class=\"token punctuation\">,<\/span>callback<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                        <span class=\"token keyword\">return<\/span> `<span class=\"token operator\">&lt;<\/span>a  title<span class=\"token operator\">=<\/span><span class=\"token string\">\"\u7f16\u8f91\"<\/span> onclick<span class=\"token operator\">=<\/span><span class=\"token string\">\"#\"<\/span><span class=\"token operator\">&gt;<\/span>\u7f16\u8f91<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token punctuation\">}<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\r\n           columnDefs<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token string\">\"targets\"<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">7<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token comment\">\/\/\u8bbe\u7f6e\u4f60\u8981\u7ed9\u54ea\u4e00\u5217\u5f00\u542f\u884c\u5185\u7f16\u8f91<\/span>\r\n        fnCreatedCell<span class=\"token operator\">:<\/span> <span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span>cell<span class=\"token punctuation\">,<\/span> cellData<span class=\"token punctuation\">,<\/span> rowData<span class=\"token punctuation\">,<\/span> rowIndex<span class=\"token punctuation\">,<\/span> colIndex<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">var<\/span> trow <span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span>\r\n            $<span class=\"token punctuation\">(<\/span>cell<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">click<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                $<span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">html<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'&lt;input type=\"text\" value=\"\u8bf7\u8f93\u5165\" size=\"16\" style=\"width: 100%\"\/&gt;'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token keyword\">var<\/span> aInput <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\":input\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                aInput<span class=\"token punctuation\">.<\/span><span class=\"token function\">focus<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span>cellData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token comment\">\/\/\u5728\u7528\u6237\u70b9\u51fb\u67d0\u4e00\u5355\u5143\u683c\u7684\u65f6\u5019\uff0c\u83b7\u53d6\u5f53\u524d\u5355\u5143\u683c\u7684\u4fe1\u606f\uff08 trow \uff09\uff0c\u4ee5\u4fbf\u540e\u9762\u4fee\u6539\u548c\u4f7f\u7528\u3002<\/span>\r\n                trow <span class=\"token operator\">=<\/span> oTable<span class=\"token punctuation\">.<\/span><span class=\"token function\">row<\/span><span class=\"token punctuation\">(<\/span>$<span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n            $<span class=\"token punctuation\">(<\/span>cell<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">on<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"blur\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\":input\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">var<\/span> text <span class=\"token operator\">=<\/span> $<span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                $<span class=\"token punctuation\">(<\/span>cell<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">html<\/span><span class=\"token punctuation\">(<\/span>text<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                oTable<span class=\"token punctuation\">.<\/span><span class=\"token function\">cell<\/span><span class=\"token punctuation\">(<\/span>cell<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span>text<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                console<span class=\"token punctuation\">.<\/span><span class=\"token function\">info<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"\u5f53\u524d\u4fee\u6539\u884c:\"<\/span> <span class=\"token operator\">+<\/span> JSON<span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>trow<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                <span class=\"token comment\">\/\/\u73b0\u5728\u4f60\u5c31\u53ef\u4ee5\u5c06\u83b7\u53d6\u5230\u5f53\u524d\u884c\u7684json\u53d1\u9001\u5230\u540e\u53f0\u8fdb\u884c\u4fee\u6539\u4e86<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n                <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span>\r\n            <span class=\"token punctuation\">}<\/span>\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<pre class=\"line-numbers language-xml\"><code class=\" language-xml\"><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Datatables \u884c\u5185\u7f16\u8f91\uff0c\u83b7\u53d6\u9f20\u6807\u70b9\u51fb\u7684\u5f53\u524d\u5355\u5143\u683c \u9996\u5148\u9700\u8981\u5f15\u5165,\u91cd\u70b9\u5728 columnDefs\uff1a &#038;lt&hellip; <a class=\"more-link\" href=\"https:\/\/www.xhome.club\/index.php\/2023\/12\/02\/datatables-%e8%a1%8c%e5%86%85%e7%bc%96%e8%be%91%ef%bc%8c%e8%8e%b7%e5%8f%96%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e7%9a%84%e5%bd%93%e5%89%8d%e5%8d%95%e5%85%83%e6%a0%bc\/\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">Datatables \u884c\u5185\u7f16\u8f91\uff0c\u83b7\u53d6\u9f20\u6807\u70b9\u51fb\u7684\u5f53\u524d\u5355\u5143\u683c<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-it","entry"],"_links":{"self":[{"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xhome.club\/index.php\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}